程序员

js闭包解决事件传参错误的问题

2019-02-27  本文已影响11人  刘振宁的博客

问题

js,在事件中使用外部的参数,因为定义事件的时候,事件不执行,当执行事件的时候,参数却已经改变。如下

for (var i=0;i<statementList.length;i++) {
    var statement = statementList[i];
    var statementId = statement.id;
        $item.find('.historytest_right').click(function () {
            console.info(statementId);
        });
    $('body').append($item);
}

这段代码,是循环了一个数组,为每一项添加一个单击事件,单击之后,输出statementId,但是都是输出8,也就是最后一个statement的id,当单击的时候,statement的值已经固定了,成为最后一个了.


image.png

解决方法

用js的闭包特性,可以记录当时定义函数时的值,如下:

for (var i=0;i<statementList.length;i++) {
    var statement = statementList[i];
    var statementId = statement.id;
    //定义函数,立即执行,并将参数传递过去,进行记录(一直保持在内存中)
    (function (myStatementId) {
        $item.find('.historytest_right').click(function () {
            console.info(myStatementId);
        });
    })(statementId);
    $('body').append($item);
}

这种写法是可以的。

也可以写成内部临时变量

(function (myStatementId) {
    $item.find('.historytest_right').click(function () {
        console.info(myStatementId);
    });
})(statementId);

//===>内部临时变量

(function () {
    var myStatementId = statementId;
    $item.find('.historytest_right').click(function () {
        console.info(myStatementId);
    });
})(statementId);
上一篇 下一篇

猜你喜欢

热点阅读