问题描述

js 回调函数的一个疑惑

$(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呢？难道是回调的执行顺序的问题？求大神解答

解决方案

@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));
            }
        });

解决方案二：

如何写回调函数？

? 如果自己在写一个方法或函数，你有可能会遇到需要一个回调函数。下面就是一个简单的常见回调函数例子：

function mySandwich(param1, param2, callback) {

alert('Started eating my sandwich.

It has: ' + param1 + &#......
答案就在这里：一个js 回调函数

解决方案三：

因为alert中是用的变量i，i最后等于5。