js 回调函数的一个疑惑

Question

$(document).ready(function(){ for(var i = 0 ; i < 5; i++){ $("#b"+i).bind("click",function(){ alert(i); }); } });

This is a paragraph.

请点击这里0
请点击这里1
请点击这里2
请点击这里3
请点击这里4

代码如上，很简单的一个循环。但是为什么这5个button点击后都是alert出5呢
为什么不是0,1,2,3,4呢？难道是回调的执行顺序的问题？求大神解答

Answer 1

@wuheng_1 正解
这是闭包法则带来的结果。

$(document).ready(
    function(){ 
            //形成闭包
            for(var i = 0 ; i < 5; i++){
                //在这里定义了变量i
                $("#b"+i).bind("click",function(){
                        //内部函数调用了变量i
                        alert(i); 
                    });
            }
            //假如在这里继续改变i的值，那么你会发现alert的值继续发生改变
        });
//问题的关键在于内部方法使用了外部方法的变量i

就这个问题而言，当然是有解决办法的，思路1，放弃id选择器，把id当成一个属性，然后利用startWith过滤器选择到这些东西，然后each枚举通过解析id的具体值来完成事件的绑定。
思路2，定义一个返回值为function的js方法，然后把i作为参数传进去。然后在绑定中调用此方法获取绑定事件的具体执行方法（可能说的不是很清楚，直接函数片段）

//思路一
$("*[id^='b']).each(function(index, data){
    var i = $(data).id().substring(1);
    $(data).bind("click", function(){alert(i);});
});
 //思路二
 function(){ 
            var getFun = function(canshu){return alert(canshu);};
            for(var i = 0 ; i < 5; i++){
                $("#b"+i).bind("click", getFun(i));
            }
        });