美文网首页基础前端
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()和函数节流

    setTimeout()方法 setInterval是设置间隔器;setTimeout是设置延时器。 window...

  • 函数节流和防抖

    事件节流和防抖利用setTimeout控制函数执行的时机,提高性能,解决高频触发问题。常见于onscroll、on...

  • 定时器

    定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流 定时器:setTimeout 只...

  • setTimeout和setInterval深入理解

    一、setTimeout和setInterval定时器的参数 setTimeout和setInterval函数用来...

  • 函数防抖与函数节流

    函数防抖 连续多次触发(两次触发的时间间隔,不超过setTimeout等待时间)只执行最后一次 函数节流 固定时间...

  • JS定时器

    定时器主要由setTimeout()和setInterval()这两个函数完成。 1.setTimeout()函数...

  • setTimeout用法&任务队列&函数节流原理

    1、setTimeout与setInterval运行机制 setTimeout和setInterval中引入的函数...

  • 2018-04-02播放伴奏问题

    播放原唱函数 开始录音绑定函数 setTimeout的用法 setTimeout(函数名,时间,函数的参数1,函数...

  • 2019-06-24 函数节流和函数防抖

    最近看了很多blog里介绍的函数节流和函数防抖,所以整理出一套较为简单,易理解的函数节流和函数防抖 函数节流:首先...

  • 手写代码系列(持续更新)

    1、手写instanceOf的实现原理 2、手写节流和防抖函数 2.1 节流函数 节流函数原理:规定在一个单位时间...

网友评论

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

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