Javascript 在AJAX完成后立即执行操作。don'；不要等待设置的间隔时间来进行另一个AJAX调用_Javascript_Jquery_Html_Ajax

Javascript 在AJAX完成后立即执行操作。don'；不要等待设置的间隔时间来进行另一个AJAX调用

javascript jquery html ajax

Javascript 在AJAX完成后立即执行操作。don'；不要等待设置的间隔时间来进行另一个AJAX调用,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一个页面，有10个图片，托管在亚马逊aws上，由于某些原因，检索速度非常慢等等我现在尝试显示一个没有任何缩略图图像的页面，然后使用AJAX调用来获取它们。因此，由于PHP脚本中的一个特定图像“获取”周期可能需要很长时间，因此我在一个示例脚本中创建了一个间隔，该间隔最终将调用一个控制器/方法URL，该URL将根据其他一些参数、实体ID等为每个thumb“slot”检索正确的图像。（这里面有很多东西）我设法每2秒调用一次AJAX（当然是基于时间间隔），但我不想等待整整2秒来获取集合中的另一个

我有一个页面，有10个图片，托管在亚马逊aws上，由于某些原因，检索速度非常慢等等

我现在尝试显示一个没有任何缩略图图像的页面，然后使用AJAX调用来获取它们。因此，由于PHP脚本中的一个特定图像“获取”周期可能需要很长时间，因此我在一个示例脚本中创建了一个间隔，该间隔最终将调用一个控制器/方法URL，该URL将根据其他一些参数、实体ID等为每个thumb“slot”检索正确的图像。（这里面有很多东西）

我设法每2秒调用一次AJAX（当然是基于时间间隔），但我不想等待整整2秒来获取集合中的另一个图像，例如，如果AJAX调用在0.5秒内完成（在那里浪费1.5秒的纯等待时间）

所以我在这里试图弄清楚，当调用jQuery ajax.done（）时，我可以“打破”间隔等待时间周期的等待时间，并立即进行另一个ajax调用。尝试了几种方法，但都没有成功

HTML和JS：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css"/>
</head>

<body>

<ul class="thumbs">
    <li><img src="images/no-image.jpg" alt="buffalo soldier"/></li>
    <li><img src="images/no-image.jpg" alt="buffalo soldier"/></li>
    <li><img src="images/no-image.jpg" alt="buffalo soldier"/></li>
    <li><img src="images/no-image.jpg" alt="buffalo soldier"/></li>
</ul>


<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>

$(document).ready(function() {


    var thumbsList = $('.thumbs'), // ul of images
        // append loader image to all images that need loading
        // ( if to be appended as loader image to images one by one, when ajax call is made, do this in the interval function instead )
        totalImagesToFetch = thumbsList.find('li img').attr('src', 'images/loader.gif').length, 
        currentPosition = 0;


        // kreiraj interval koji fetchuje sliku po sliku 
        var fetchThumbInterval = setInterval(function() {
            console.log('called');

            // dont call interval anymore if we fetched all the needed image thumbs
            if(currentPosition >= totalImagesToFetch - 1) clearInterval(fetchThumbInterval); 

            fetchMeNewThumb = $.ajax({
                url: "process.php",
                method: "POST"
            });

            fetchMeNewThumb.done(function(data) {
                console.log(currentPosition);
                thumbsList.find('li img:eq(' + currentPosition + ')').attr( "src", data ); // String: URL for image src attribute
                currentPosition++;
                resetInterval(fetchThumbInterval, 2000);
            });

        }, 2000);

        function resetInterval(intervalName, miliseconds) {
            clearInterval(intervalName);
            setInterval(intervalName, miliseconds);
        }



});

</script>

使用的图像只是一些在线随机图像。p.S.（如果您注释掉对

resetInterval（）

function:）的调用，它会正常工作，每2秒调用一次AJAX）

更新您的AJAX以使用

success

$.ajax({
     url: "process.php",
     method: "POST",
success: function(data) {
//do whatever after ajax successfully completes.
}
 });

看

实际上，您需要等待一定的时间，如果请求未在所述时间内得到处理（例如，成功/错误），

.abort（）

将其删除，并使用相同的请求启动新计时器。我是否正确

如果是，请检查并更改代码

正如建议的那样，setTimeout要好得多。创建函数只是为了调用ajax，如果成功，填充拇指并调用函数一次egain。在setTimeout中，只需清除ajax调用并调用所述函数egain

我希望我说得很清楚，如果您需要示例代码，请告诉我。但我建议您自己编写。

如果我没有错，这将基本上做相同的事情：）在您建议后尝试了这种方法，但我仍然需要等待2秒钟才能进行另一个ajax调用，因为ajax调用在interval函数中。我不想“等待”ajax真正完成，因为它应该执行的操作可能需要很长时间，我想最多等待2秒钟，然后启动另一个ajax调用，但是如果之前的ajax调用已经完成，我想在2秒钟结束之前启动另一个ajax调用，如果这有意义的话：）通常情况下，

setInterval

处理起来可能很麻烦。为什么不干脆

setTimeout

？等待2秒来执行下一个ajax请求，如果当前请求提前成功，只需清除超时并手动触发下一个请求。不要疯狂地摆弄间歇时间。我现在就试试这种方法，谢谢你的建议：）哦，强迫性的放松。如果你（不是你自己）真的认为有什么不对劲，足以让回答这个问题的三个人都投反对票，那么你最好留下评论。谢谢你的建议，但是，我不想中止ajax请求，只要让它继续运行，然后继续下一个ajax请求，该请求应该开始获取下一个图像，好的，我现在理解你的问题了，检查一下这个片段：这看起来真的很像，但是它似乎有一些严重的错误：）currentPosition有些问题。因为它在调用fetchImage（）函数之前递增，所以逻辑混乱。如果我将它移动到fetchImage（）函数$.ajax.done（）调用中，它也不起作用，每次都返回位置0。这不是一个bug，这是实际需要的。如果您注意到，这里使用了递归，您需要条件来结束递归。让我更改函数：您将看到1,2..5，因为没有ajax调用。我将尝试解决这个问题。非常感谢你的帮助！：）

$.ajax({
     url: "process.php",
     method: "POST",
success: function(data) {
//do whatever after ajax successfully completes.
}
 });