问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
zhayes
    1.2k563101
    头像
    flyingCrp
      3.4k31218

      图片描述

      <!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>
      javascript
      阅读 3.9k
      6 个回答
      得票最新
      头像
      RockerLau
        37152339

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

        /*
        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);
            }
        }
        头像
        JasonKidd
          3.3k1521

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

          头像
          冰星寒水
            1.4k21220

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

            头像
            kikong
              19.1k31320

              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绑定事件回调

              头像
              sugar
                32123

                timer ＝ null; 后面应该是逗号

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

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

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题