在js“for”循环中控制$ .ajax函数?

时间:2016-03-21 16:08:55

标签: javascript jquery ajax

这是我的问题。我有一个js函数执行$ .ajax调用来从服务器获取一些数据。当它获取该数据时,我需要将控制权传递回浏览器以显示对div的更新。 js函数本身在for循环中,我需要确保for循环不会前进,直到js函数更新div并允许浏览器显示该更新,此时for循环前进和js函数(再次调用其ajax调用)继续,直到for循环测试导致循环结束。

我尝试了很多不同的方法 - 回调,承诺等,但到目前为止我似乎无法确保循环不会前进,直到js函数获取其服务器数据,更新div,导致浏览器显示该更新并完全完成。

这是一个简单的功能简化版本:

function myFunction (email) {
    var request = $.ajax( {
       url: 'getit.php',
       cache: false,
       async: false,
       method: "post",
       timeout: 1000,
       data: "requesttype=getemailname&email="+encodeURIComponent(email)
    });
    request.done(function(response) {
         $("#myDiv").html(response);
    });
}

这里是调用它的js的一部分:

.....

var emailscount = emails.length;
for(var i=0;i<emailscount;i++) {
    myFunction (emails[i]);
}

.....

所以,我的问题是:

1) myFunction 必须允许浏览器显示更新的div html - 我不确定如何实现?

2)当 myFunction 从服务器收到数据后,for循环 应该只进行 ,更新div html, AND 允许浏览器显示该div。

目前,我已将$ .ajax调用异步标志设置为“false”以停止执行,直到数据恢复,但我如何确保浏览器显示新的div内容,并且for循环执行在上一次 myFunction 调用完全完成之前,请不要再次调用 myFunction

您可以给予我任何帮助,非常受欢迎,因为现在我无法完成这一切!

2 个答案:

答案 0 :(得分:1)

听起来你需要一个递归函数,而不是一个带有同步ajax调用的for循环

(function myFunction(i) {
    $.ajax({
        url: 'getit.php',
        method: "post",
        timeout: 1000,
        data: {
            requesttype : 'getemailname',
            email : emails[i]
        }
    }).done(function(response) {
        $("#myDiv").html(response);
        if (emails[++i]) myFunction(i); // continue when this one is done
    });
})(0);

答案 1 :(得分:1)

感谢大家的帮助!我取得了很好的进展(包括处理JQuery弃用!)但是遇到了另一个问题。因为我需要将控制权交还给浏览器以便在我递归时显示刷新的div,所以我按如下方式调用setTimeout:

<IfModule cache_module>
LoadModule cache_disk_module modules/mod_cache_disk.so
<IfModule cache_disk_module>
CacheDefaultExpire 3600
CacheEnable disk /
CacheRoot "/cache/"
CacheDirLevels 2
CacheDirLength 1
</IfModule>
</IfModule>

其中myFunction(recurses)现在返回一个承诺,当它完成它的$ .ajax调用时。

如果我只是打电话:

var nextBitOfWork = function () {
    return myFunction(email);
};
setTimeout(nextBitOfWork, 0);

没有上面的setTimeout函数构造,承诺将被传递并且我的所有承诺都被捕获并允许我获得我需要的数组输出并且一切都很好。但是如果没有setTimeout,我就不会刷新浏览器。使用它如上所述我得到div更新刷新显示,但似乎失去了承诺,因此脚本继续,我不会填充我用来捕获值的数组,因为我递归。

有关如何确保setTimeout传递承诺的任何想法?

由于