javascript - 关于下拉菜单的问题?
PHPz
PHPz 2017-04-11 10:41:32
[JavaScript讨论组]
PHPz
PHPz

学习是最好的投资!

全部回复(2)
ringa_lee
    aLi[i].onmouseover=function(){ //为每个li标签添加鼠标移入动作
        var oSubNav=this.getElementsByTagName('ul')[0]; //获取鼠标当前li标签的第一个ul标签(二级菜单)
        if(oSubNav){ //如果ul标签存在的话
        var This=oSubNav; // 是否多余?答: 的确是多余的,你可以直接使用 oSubNav 变量即可
        clearInterval(This.time); //为什么要有?答:每开启一个定时器就会产生一个线程(类似概念)
                                               // 如果你不先清除已有的(无论是否有)定时器
                                               // 那么问题就会很明显的暴露出来:
                                               // 动画速度在不断加快
                                               // 原因是有多个线程在操作 同一元素
                                               // 他们之间相互影响
                                               // 所以,你如果要保持始终只有一个线程控制
                                               // 这个元素的话,就需要先清除已有的线程
                                               // 无论有没有,都清除,这是最保险的
                                               // 反正没有的话,清除也不会报错
                                               // 这是为了增强代码的健壮性,不容易出错) 
        // 之所以要用 This.time = ... 来存这个定时器,是因为你不存起来
        // 后面你怎么移除这个已定义的定时器??
        // 就像你找人一样,如果他没有名字,你怎么找到他??
        // 所以,这边要存起来
        This.time=setInterval(function(){ //定时,让二级菜单ul自增
                This.style.height=This.offsetHeight+1+"px"; //获取当前二级菜单ul高度 + 1
                if(This.offsetHeight>=120) //高度大于等于120时
                clearInterval(This.time); //停止执行
            },1)
        }
    }

1 , 2回答在上线注释中。

问题3
模拟一个过程,就是那个定时器的过程。如果是在定时器定义之后清除,会怎么样??

var time = null;
var i = 0;
function test(){
  time = setInterval(test , 1000);     // 定义
  i++;
  console.log(i);                      // 打开控制台查看
  clearInterval(time);                 // 清除
}

你觉得代码会无限执行下去吗。答案是不会。他只会执行一次。因为在执行定时器之前,定时器就被你给清除了。
 

然后按照原代码来看下过程:

var time = null;
var i = 0;
function test(){
    clearInterval(time); // 清除定时器,虽然第一次执行的时候没有被设置
                         // 不过,他又不会报错,你理他呢
                         // 第二,三次....总之,接下去的执行才是亮点
                         // 每次都会清楚上次定义的定时器
                         // 所以,能够确保,每次执行时,只有一个定时器在执行
    
    i++;
    
    console.log(i);
    
    time = setInterval(test , 1000); // 定义定时器
}
test();

所以,要先清除定时器,后定义

迷茫
  1. This用oSubNav是可以的。就是为了传递进去

  2. 这个写法好像是jquery上用的吧。也是为了能访问到?用别的也是可以的。

  3. 避免多次触发

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号