javascript - 查询 : Set delay for each iteration

Question

假设这是我想要的逻辑:

// 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();
        });
    });

好像迭代之间没有延迟。加载符号 fadeIn 和 fadeOut 立即。知道如何正确延迟迭代吗？

Answer 1

使用promises (从技术上讲，此示例中的 jQuery Deferred 但概念相同)修复流程，让您省去很多麻烦:

$('#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，同时将您的应用程序逻辑与样式进一步分离。