Question

我有一个包含10个图像的页面，这些图像托管在amazon aws上，由于某种原因，检索速度很慢等。

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

我设法每2秒进行一次AJAX调用（基于当然的间隔），但是如果AJAX调用完成，我不想等待整整2秒来获取集合中的另一个图像，例如， 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：）

Answer 1

看看Abort Ajax requests using jQuery。

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

如果有，请检查abort并更改您的代码。

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

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

Answer 2

更新您的AJAX以使用success

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

在AJAX为.done（）之后立即执行操作，不要等待设置间隔时间再进行一次AJAX调用

2 个答案: