Javascript Jquery：为每个迭代设置延迟

假设这就是我想要的逻辑：

// On fail return status = 500, else success will return PDF bytestream
function request() {
  return $.ajax({
            url: url,
            async:false,
            // other properties
        });
}

$('#action').click(function(e) {  

    $("#loading").fadeIn("slow"); // display loading

    while(true) {
        if(request().status != 200) {
            delay(3000);
        } else { break; }
    }

    $("#loading").fadeOut("slow"); // hide loading
});

对于没有迭代和请求的测试延迟，此代码运行良好：

    $(document).ready(function(){
        $('#action').click(function(e) {  
            $("#loading").fadeIn("slow");
            setTimeout(function() {
                $("#loading").fadeOut("slow");
            }, 5000);
            e.preventDefault();
        });
    });

当我将一些循环和请求放入其中时，问题开始了，如下所示：

    var isOk;
    $(document).ready(function(){
        $('#action').click(function(e) {  

            $("#loading").fadeIn("slow");

            while(true) {
                request().always(function(jqXHR){
                    console.log(jqXHR);
                    if(jqXHR.status == 500) {
                        isOk = false;
                        setTimeout(function(){console.log("False")}, 3000);
                    } else { isOk = true; }
                });

                if(isOk) {break};
            }

            $("#loading").fadeOut("slow");
            e.preventDefault();
        });
    });

就像在迭代之间没有延迟一样。加载符号会立即淡入淡出。知道如何为迭代执行正确的延迟吗？

因为ajax调用是，它不会在执行下一行代码之前等待

如果要在完成时淡出，请在ajax调用的回调函数内或内部运行

fadeOut（）

将以下内容放在您有

//其他属性

的位置：

complete: function(jqXHR, textStatus) {
  $("#loading").fadeOut("slow");
}

---

您必须使用，

setTimeout（）

否则

延迟：

$("#loading").fadeIn(2000);
$("#loading").delay(2000).fadeOut(2000);

设置超时：

$("#loading").fadeIn(2000);
setTimeout(function(){
  $("#loading").fadeOut(2000);
}, 2000);

---

另一个建议是，处理Ajax调用中的错误，而不是while循环中的错误：

error: function(jqXHR, textStatus, errorThrown) {
  setTimeout(function() {
    request();
  }, 3000);
}

另一种方法是，接受@Brad的建议，使用CSS动画来代替。

因为ajax调用是，它不会等待执行下一行代码

如果要在完成时淡出，请在ajax调用的回调函数内或内部运行

fadeOut（）

将以下内容放在您有

//其他属性

的位置：

complete: function(jqXHR, textStatus) {
  $("#loading").fadeOut("slow");
}

---

您必须使用，

setTimeout（）

否则

延迟：

$("#loading").fadeIn(2000);
$("#loading").delay(2000).fadeOut(2000);

设置超时：

$("#loading").fadeIn(2000);
setTimeout(function(){
  $("#loading").fadeOut(2000);
}, 2000);

---

另一个建议是，处理Ajax调用中的错误，而不是while循环中的错误：

error: function(jqXHR, textStatus, errorThrown) {
  setTimeout(function() {
    request();
  }, 3000);
}

---

另一个，接受@Brad的建议，改用CSS动画。

以下是我所说的。在本例中，fadeIn作为回调完成后执行淡出。我包括了一个超时，以显示您也可以这样做

$（函数（）{
$（“#test”）.fadeIn（2000，function（）{
setTimeout（函数（）{
$（“#测试”）。淡出（2000年）；
}, 1000);
});
});

试验室
以下是我所说的。在本例中，fadeIn作为回调完成后执行淡出。我包括了一个超时，以显示您也可以这样做


$（函数（）{
$（“#test”）.fadeIn（2000，function（）{
setTimeout（函数（）{
$（“#测试”）。淡出（2000年）；
}, 1000);
});
});

试验室
解决ajax请求时，应该调用.fadeOut（），如下所示：

$(document).ready(function(){

    $('#action').click(function(e) { 
        e.preventDefault(); 

        $("#loading").fadeIn("slow");

        performRequest();

    });

    function performRequest() {

            request()
                .always(function(jqXHR){
                    console.log(jqXHR);

                    if(jqXHR.status === 500) {
                       console.log("False");
                       var t = setTimeout(function() { 
                           performRequest();    // retry after 3sec.
                           clearTimeout(t);
                       }, 3000);
                    } else { 
                       onRequestSuccess(); // success
                    }
            });
    }

    function onRequestSuccess() {
         $("#loading").fadeOut("slow");
    }

});

解决ajax请求时，应该调用.fadeOut（），如下所示：

$(document).ready(function(){

    $('#action').click(function(e) { 
        e.preventDefault(); 

        $("#loading").fadeIn("slow");

        performRequest();

    });

    function performRequest() {

            request()
                .always(function(jqXHR){
                    console.log(jqXHR);

                    if(jqXHR.status === 500) {
                       console.log("False");
                       var t = setTimeout(function() { 
                           performRequest();    // retry after 3sec.
                           clearTimeout(t);
                       }, 3000);
                    } else { 
                       onRequestSuccess(); // success
                    }
            });
    }

    function onRequestSuccess() {
         $("#loading").fadeOut("slow");
    }

});

使用（技术上，在本例中，使用相同的概念）来修复流程，并为自己省去很多麻烦：

$('#action').click(function(e) {  
  $('#loading').fadeIn('slow'); // display loading
  $.ajax(url).always(function (e) {
    $('#loading').fadeOut('slow'); // hide loading
  });
});

请注意，我使用的是
.always（）
。。。这样即使有错误，我们仍然会隐藏加载指示器。您可以为
.fail（）
添加另一个处理程序以捕获错误

更好的是，使用
.show（）
和
.hide（）
，并使用CSS动画进行任何类似的淡入淡出样式。虽然在这种情况下不太重要，但它使这些转换在浏览器引擎中、在JavaScript之外得到了极大的优化，同时将您的应用程序逻辑与样式分离得更多。
使用（在本例中，技术上是相同的概念）来修复流程，并为您省去很多麻烦：

$('#action').click(function(e) {  
  $('#loading').fadeIn('slow'); // display loading
  $.ajax(url).always(function (e) {
    $('#loading').fadeOut('slow'); // hide loading
  });
});

请注意，我使用的是
.always（）
。。。这样即使有错误，我们仍然会隐藏加载指示器。您可以为
.fail（）
添加另一个处理程序以捕获错误

更好的是，使用
.show（）
和
.hide（）
，并使用CSS动画进行任何类似的淡入淡出样式。虽然在这种情况下不太重要，但它使这些转换在浏览器引擎中，在JavaScript之外，得到了极大的优化，将应用程序逻辑与样式分离得更为明显。
将淡出放在超时后执行的fadeIn调用中的回调中。@Jecoms是否类似于帮助和回答？应将淡出放在setTimeout回调中不要使用
async:false
。浏览器将锁定，等待服务器。@Brad当前逻辑需要同步，但响应会很快。。因此，我认为应该确定在超时后执行的fadeIn调用中，将fadeOut放入回调中。@Jecoms这类似于帮助和回答吗？应该将fadeOut放入setTimeout回调中不要使用
async:false
。浏览器将锁定，等待服务器。@Brad当前逻辑需要同步，但响应会很快。。所以我认为应该是okasync:false是不推荐的。。。异步：不推荐使用false。。。完全同意+1如果ajax调用失败，他将重试该调用，因此在第一次调用后，即使它仍在重试，该调用也会消失（您的代码不会重试，但他有这个问题）。@Jecoms是的，这是应该的。我刚刚添加了一条评论来解释这一点。如果要重试，应该有一个函数，该函数使用
过滤错误。然后（）
，透明地重试。在所有这些尝试完成之前，外部承诺不应该解决或失败。@Jecoms是的，获取更多信息。。我提出的请求是为了检查当前报表状态，该状态在服务器端异步完成。。如果未准备好，我将延迟并再次重试请求。。我会试试大家的建议first@Mrye您如何处理重试与您应该使用承诺和这样的流来处理淡入/淡出
#加载
这一事实无关。正如我所说的，您可以在此添加一个
.then（）
，以便根据需要重试和筛选，或者您可以使用一些现有代码：完全同意+1如果ajax调用失败，他将重试该调用，因此在第一次调用后，即使它仍在重试，该调用也会消失（您的代码不会重试，但他有这个问题）。@Jecoms是的，这是应该的。我刚刚添加了一条评论来解释这一点。如果要重试，应该有一个函数，该函数使用
过滤错误。然后（）
，透明地重试。在所有这些尝试都完成之前，外部的承诺不应该解决或失败。@Jecoms是的，比如说