javascript - $.get循环: why the function is performed after incrementing?

Question

我是 Javascript 的初学者，我觉得 $.get jQuery 有问题。

通常，您可以将其分配给一个函数，该函数将在正确检索数据后执行。

但是，如果我将 $.get 放入循环中，即使尚未检索数据，循环也会继续执行，这就是我的问题。

这是我的代码(这是针对 GreaseMonkey 的):

var1 = document.getElementsByClassName("some_class");
i = 0;

while (i < var1.length) {
    url = var1[i].getElementsByTagName("some_tag")[0].href;

    $.get(url, function(data) {
        if (data.contains("some_string")) {
            alert(i);
        }
    });
i++;
}

这里，如果警报应返回 1，则警报将返回 var1.length 事件。

我尝试在 url 声明之后放置一个警报(i)，并且我知道 i++ 是在 $.get 中的函数之前完成的。

这肯定是一个微不足道的问题，但我无法掌握不让这种情况发生的逻辑。

Answer 1

将您的 $.get 函数包装如下:

(function(i) {
    $.get(url, function(data) {
        if (data.contains("some_string")) {
            alert(i);
        }
    });
})(i);

立即调用的函数表达式会导致外部作用域中的 i 的当前值通过函数的参数 i 进行绑定(bind)(然后隐藏外部变量)。如果您愿意，可以为函数参数指定一个不同的名称。

请注意，这仅解决了您实际提到的问题，即循环变量的递增独立于回调。如果您希望确保 AJAX 请求一次运行一个，那么还有其他解决方案，例如:

var els = document.getElementsByClassName("some_class");
var i = 0;

(function loop() {
    if (i < els.length) {
        var el = els[i];
        var url = el.getElementsByTagName("some_tag")[0].href;
        $.get(url).done(function(data) {
            if (data.contains("some_string")) {
                alert(i);
            }
            i++;
        }, loop);   // .done(f1, f2) - see below
     }
})();

.done() 调用的形式为 .done(callback, Loop)，这两个函数将按顺序调用。因此，i++ 行总是先发生，然后然后它安排伪递归地调用 loop 来处理下一个元素。