关于 JavaScript 中同步和异步执行问题

Question

在开发一个异步 AJAX 请求的时候，遇到一个意想不到的结果，我遍历一组元素，发送一个 AJAX 请求，将请求的结果载入这个元素里面，请看下面的代码：

$('.is_include').each(function(){

    this_td = $(this);
    this_td.html('查询中…');

    $.getJSON('is_inclue.php?id='+this_td.attr('is_inclue'), function(){
        if(data == 1){
            this_td.html('已收录');
            this_td.attr('is_include', '1');
        }else{
            this_td.html('未收录');
        }
    })
})

最后的运行结果是只有最后一个元素被更改了内容，通过浏览器的审查元素工具，可以看到确实发送了多个 AJAX，也返回了查询的结果。

问题就出在这个是异步的操作，jQuery中的 each() 方法运行速度是非常快的，就是一瞬间的事情，但是AJAX请求并不是，可能 each() 已经运行完成了，AJAX 第一个请求还没有完成，在 each() 里面，我将元素赋值给 this_td，方便后面调用，但是这个又出现了一个问题，当第一个AJAX完成以后，由于 this_td 是公用的，运行到最后就是最后一个元素，所以就只更新最后一个元素的值。

既然找到了问题，那么我们来修改下这个程序，也就是说在 AJAX 请求之前，this_td 元素的指向都是对的，但是 AJAX 后就不对了，那么我们实际上就是要找到我们发起请求的元素，我们可以给 each() 添加一个索引，然后返回的时候更新当前索引的元素。

$('.is_include').each(function(i){

    this_td = $(this);
    this_td.html('查询中…');

    $.getJSON('is_inclue.php?id='+this_td.attr('is_inclue'), function(){
        if(data == 1){
            $('.is_include').eq(i).html('已收录');
            $('.is_include').eq(i).attr('is_include', '1');
        }else{
            $('.is_include').eq(i).html('未收录');
        }
    })
})

其实在定时器中也会出现类似的问题，请看下面的代码：

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        alert(i)
    }, 100);
}

这段代码的本意是每隔100毫秒将i的值加1输出，然而这段代码并不能达到上述目的，因为i的值在循环中增加，这是一个同步时序，它在计时器事件被调用钱就已经发生了，最终计时器得到的结果是循环后的i值，也就是5次alert显示的结果都是5。

for(var i = 0; i < 5; i++){
    setTimeout("alert("+i+")", 100);
}

可以采用了拼接字符串的方式来调用计时器，由于i在字符串运算中被替换成了当前循环时的实际常量值，所以得到了正确的结果。

实际上，比字符串更好的模式是通过闭包，所以第三段代码中，开发人员通过闭包嵌套和不同时序的执行，巧妙地得到了正确的结果，并且比第二段代码更具效率和通用性。

for(var i = 0; i < 5; i++){
    (function(i){
        setTimeout(function(){
            alert(i)
        },100);
    })(i);
}