在 AJAX 完成后立即执行操作 .done()，不要等待设置的间隔时间再进行 AJAX 调用答案

【问题标题】：Do action immediately after AJAX is .done(), don't wait for set interval time to make another AJAX call在 AJAX 完成后立即执行操作 .done()，不要等待设置的间隔时间再进行 AJAX 调用
【发布时间】：2016-03-01 12:28:17
【问题描述】：

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

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

我设法每 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>

简单的 CSS：

.thumbs li {
    display: block;
}

.thumbs li img{
    width: 400px;
    height: 400px;
}

并且使用的图像只是网上找到的一些随机图像。附：（如果您注释掉对resetInterval()函数的调用，它会正常工作并每2秒调用一次AJAX :)

【问题讨论】：

通常情况下，setInterval 处理起来会很痛苦。为什么不简单地setTimeout？一个等待 2 秒来执行下一个 ajax 请求，如果当前一个提前成功，您只需清除超时并手动触发下一个请求。不要疯狂地摆弄间隔。
现在试试这个方法，谢谢你的建议 :)
哦，强迫性的投票者松散。如果您（不是您的 OT）真的认为有什么不对劲足以证明对所有三个回答这个问题的人投反对票是合理的，那么您不妨发表评论。

标签： javascript jquery html ajax

【解决方案1】：

看看Abort Ajax requests using jQuery。

您真正想要的是等待一定的时间，如果在所述时间内未处理请求（例如成功/错误），.abort() 它并启动具有相同请求的新计时器。我说的对吗？

如果是这样，请检查abort 并更改您的代码。

正如建议的那样，setTimeout 要好得多。创建仅用于调用 ajax 的函数，如果成功填充拇指并再次调用该函数。在 setTimeout 中，只需清除 ajax 调用并重新调用所述函数。

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

【讨论】：

感谢您的建议，但是，我不想中止 ajax 请求，只需保持运行并继续执行下一个 AJAX 请求，该请求应该开始获取下一个图像
噢，好的，我现在明白你的问题了，看看这个sn-p：jsbin.com/canizaw/edit?js,console,output
这看起来确实像要走的路，但它似乎有一些严重的错误:) currentPosition 的东西。因为它是在调用 fetchImage() 函数之前递增的，所以它搞乱了逻辑。如果我将它移动到 fetchImage() 函数 $.ajax.done() 调用中，它也不起作用，每次都返回位置 0。
这不是错误，这是实际需要的。如果您注意到，有用于此的递归，并且您需要条件来结束递归。让我改一下函数：jsbin.com/canizaw/edit?js,console,output 你会看到 1,2..5 因为没有 ajax 调用。
我会尝试解决这个问题。非常感谢你的帮助！ :)

【解决方案2】：

更新您的 AJAX 以使用 success

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

【讨论】：

如果我没记错的话，这基本上会做同样的事情:) 在你提出建议后尝试了这种方法，但我仍然需要等待 2 秒才能进行另一个 ajax 调用，因为ajax 调用在区间函数内。而且我不想“等待” ajax 实际完成，因为它应该执行的操作可能需要很长时间，我想最多等待 2 秒，然后触发另一个 AJAX 调用，但如果之前的 AJAX通话已完成，我想在 2 秒前触发另一个 AJAX 调用，如果这有意义的话:)