基础前端

setTimeout()和函数节流

2019-02-22  本文已影响10人  CondorHero

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  }
上一篇 下一篇

猜你喜欢

热点阅读