美文网首页基础前端
setTimeout()和函数节流

setTimeout()和函数节流

作者: CondorHero | 来源:发表于2019-02-22 23:18 被阅读10次

    setTimeout()方法

    setInterval是设置间隔器;setTimeout是设置延时器。

    window.setTimeout(函数,时间);
    在指定时间之后,执行函数一次,仅仅执行1次,同样的,它也是window对象的方法,可以不写window
    在3000毫秒之后,控制台显示你好,仅仅显示1次:

     setTimeout(function(){
     console.log("你好");
      }, 3000);
    

    延时器也能被清除,当延时器没有执行的时候,就可以清除,清除不会触发函数。
    clearTimeout();
    主要用于鼠标离开时,效果延迟消失。此处用于节流。

    函数节流

    所谓的函数节流,就是我们希望一些函数不要连续的触发。甚至于规定,触发这个函数的最小间隔是多少时间。例如:轮播图点击的时候连续快点,速度并不变快。防止用户的流氓行为。

    这个就是函数节流。

    方法1:

    经典的函数节流模型:

      var lock = true;  // 设置一个锁
      input.onclick = function(){
        if(!lock) return;
        lock = false;
        setTimeout(function(){
              lock = true;
        },1000);
    }
    

    方法2:
    改变我们的运动框架,在运动框架里面加上一个逻辑:运动开始了,就给elem加上一个属性isanimated,表示是否在运动,未定义flase改为true。然后运动停止之后,停表之后,把elem.isanimated设为false

    input.onclick = function(){
            if(m_unit.isanimate) return;   //如果点击按钮的时候运动机构在动,那么return3  }
    

    相关文章

      网友评论

        本文标题:setTimeout()和函数节流

        本文链接:https://www.haomeiwen.com/subject/fanyyqtx.html