JS闭包解决js for循环输出i为同一值的方案

最近在做一个项目,发现js for循环变量输出的i老是同一个值,想到了以前做的项目也涉及到js闭包,重新整理代码发出来做一个笔记,初学者一看即懂,大神可以略过了。

JS闭包特性:

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

直接上代码:

    <div id="demo"></div>
    <br />
    <div id="demo2"></div>
    <script>
        $(function () {
            var init = function () {
                _onClick = function (obj, _item) {
                    //将i传入到(外部)函数函数执行,作用域为该方法内有效
                    obj = $(obj).click(_item, function (e) {
                        alert(_item);
                    });
                    return obj;
                }
                for (var i = 0; i < 10; i++) {
                    //方法①jQuery解决方案
                    var div_item = _onClick("<div>" + i + "</div>", i);
                    div_item.css({ "width": "200px", "height": "30px", "line-height": "30px", "text-align": "center", "background": "#" + Math.floor(Math.random() * 16777215).toString(16) });
                    $("#demo").append(div_item);

                    //方法②源生js解决方案
                    var div_item = document.createElement("div");
                    (function (div_item, i) {
                        var temp = { i: i };//将i保存到当前匿名函数的临时变量,作用域为匿名方法内有效
                        div_item.onclick = function (e, i) {
                            alert(temp["i"]);
                        };
                    })(div_item, i);//执行匿名方法
                    div_item.innerHTML = i;
                    div_item.style.width = "400px";
                    div_item.style.height = "30px";
                    div_item.style.lineHeight = "30px";
                    div_item.style.textAlign = "center";
                    div_item.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
                    document.getElementById("demo2").appendChild(div_item);
                }
            }
            init();
        });
    </script>

 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

mechrevo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值