码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript原生实现的节流和防抖

时间:2021-03-15 10:29:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:直接   java   过程   asc   回调函数   javascrip   art   回调   code   

1.防抖

  防抖:在高频触发下,在n秒内只触发一次(非严格)。如果n秒内再次触发,则重新计时

//实现debounce
function debounce(fn){
    let timer = null                    //创建一个命名存放定时器返回值
    return function (){
        clearTimeout(timer)                //输入前先杀掉前一个定时
        timer = setTimeout(() => {        //创建一个新的
            fn.apply(this, arguments)    //时间到执行fn回调函数
        }, 500)
    }
}

2.节流

  节流:在高频触发下,在n秒内只触发一次(严格)。如果多次触发,则直接忽略,等待第一个触发完毕。

  //实现throttle
  function throttle(fn){
    let flag = true          //通过闭包保存一个标记
    return function (){
        if(!flag) return     //正在定时执行,直接返回
        flag = false         //没有定时在执行,添加定时执行
        setTimeout(() => {     //定时过程中flag一直为false,下一次触发直接被返回
            fn.apply(this, arguments)
            flag = true
        },2000)
    }
}

 

JavaScript原生实现的节流和防抖

标签:直接   java   过程   asc   回调函数   javascrip   art   回调   code   

原文地址:https://www.cnblogs.com/xiaoxu1024/p/14522819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!