JS闭包的两个使用方向

      直接上代码，备用，详见注释

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>123456</p>
        <p>123456</p>
        <p>123456</p>
        <p>123456</p>
    </div>
    <p id="pp"></p>
    </form>
</body>
    <script type="text/javascript">
        var obj = document.getElementById("pp");
        /**** 闭包应用一:用于页面定时更新 *****/
        function GetTick() {
            var i = 0;
            (function () {
                obj.innerHTML = (i++).toString();
                setTimeout(arguments.callee, 1000);
            })(); //锁定变量内容放在可执行的函数括号外
        }
        function GetTick2() {
            (function () {
                obj.innerHTML = (i++).toString();
                setTimeout(arguments.callee, 1000);
            })(i = 0);//锁定变量内容放在可执行的函数括号里
        }
        GetTick2();

        /**** 闭包应用二:循环添加事件，而且每个事件参数不一样 *****/
        /**** 注意：如果不锁定i，直接附事件则每一个p都是同一个值，而且是循环最后结果的i的值 *****/
        var objs = document.getElementsByTagName("p");
        function SetEvent() {
            for (var i = 0; i < objs.length; i++) {
                objs[i].onclick = (function (i) {
                    return function () {
                        alert(i);
                    }
                })(i);//理解：先定义局部变量i，然后给i赋值，再然后onclick指向一个function
            }
        }
        SetEvent();
    </script>
</html>

 

posted on 2014-01-21 10:08  kingtiger  阅读(293)  评论(0)  编辑  收藏  举报

导航