这个JavaScript我就是想不通,我明明有定义,为什么老报错没有定义!

zhayes
  • 1.2k

图片描述

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1,#div2,#div3 {
    width: 200px;
    height: 200px;
    background: red;
    margin: 10px;
}
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <script type="text/javascript">
        var timer = null;
        oDiv = document.getElementsByTagName("div");

        function test(i) {
            timer = setInterval(function() {
                oDiv[i].style.height = oDiv[i].offsetHeight + 2 + 'px'
            }, 30)
        };
        for (var i = 0; i < 3; i++) {
            oDiv[i].onmouseover = function() {
                test(i);
            }
            oDiv[i].onmouseout = function() {
                clearInterval(timer);
            }
        }
    </script>
</body>

</html>
回复
阅读 2.8k
6 个回答

@小_秦 已经指出问题了,也提供了解决方法。我再补充两种,其他朋友如果有其他方法的话不妨贴上来。

/*
        var timer = null;
        oDiv = document.getElementsByTagName("div");

        for (var i = 0; i < 3; i++) {
            oDiv[i].onmouseover = function() {
                var _this=this;
                timer = setInterval(function() {
                  _this.style.height = _this.offsetHeight + 2 + 'px'
            }, 30);
            //方法一:避免在闭包里面引用外包函数的变量,用this来代替
            }
            oDiv[i].onmouseout = function() {
                clearInterval(timer);
            }
        }
    */

    //===================================================================

    /*
        var timer = null;
        oDiv = document.getElementsByTagName("div");

        for (var i = 0; i < 3; i++) {
            oDiv[i].onmouseover = function() {
                timer = setInterval(function() {
                  this.style.height = this.offsetHeight + 2 + 'px'
            }.bind(this), 30);
            //方法一改良
            }
            oDiv[i].onmouseout = function() {
                clearInterval(timer);
            }
        }
    */

    //===================================================================

        var timer = null;
        oDiv = document.getElementsByTagName("div");

        function test(i) {
            timer = setInterval(function() {
                oDiv[i].style.height = oDiv[i].offsetHeight + 2 + 'px'
            }, 30)
        };
        for (var i = 0; i < 3; i++) {
            oDiv[i].onmouseover = function(num){
                return function() {
                    test(num);
                }
            }(i);
            //方法二:用iife来替换,事实上,就是用iife的形参作为桥梁在两个作用域之间传值
            oDiv[i].onmouseout = function() {
                clearInterval(timer);
            }
        }

1.楼主最好去学习一下MARKDOWN怎么写。
2.这个是闭包陷阱

冰星寒水
  • 1.4k

你可以使用闭包实验一下你这个for绑定事件肯定不对的,绑定的i都是3所以肯定oDiv[3]都是不存在的,

1)
div1,#div2,#div3{width:200px;height:200px;background:red;margin:10px;}
==》
#div1,#div2,#div3{width:200px;height:200px;background:red;margin:10px;}
2)div,mouseover事件触发函数中的i为3,这里涉及到js中变量作用域
3) div的事件绑定推荐使用代理的方式-不用为每一个div绑定事件回调

timer = null; 后面应该是逗号

var timer=null,
oDiv=document.getElementsByTagName("div");
kingning
  • 3
新手上路,请多包涵

你声明变量时,要用var,如果是全局变量时函数内部不用var,儿最外层原始变量需要var的,这段代码,错误百出啊,以上楼层说了闭包的问题,就不多说了

宣传栏