js的节流与防抖

作者: super_wei | 来源:发表于2020-01-02 16:58 被阅读0次

项目上线后,经常会报出用户一直点击导致连续出发事件引发体验上的问题,尤其是在监听浏览器滚动scroll,页面调整resise的时候,这个时候我们就需要通过节流/防抖来优化这个问题;

防抖:

防抖就是指在某个时间内再次触发事件则会进行重新计时,也就是说一直触发事件则时间在不断重置;举个例子:
function debounce(method, delay){
    var timer = null;
    return function(){
        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}

节流:

所谓节流,就是指在高频触发事件时,只有在大于设定的周期时间内才去触发一次,触发后这个周期时间清零重新开始计算,和防抖的区别就是为了确保在这个周期时间只执行一次;

function throttle(method, delay){
     var last = 0;
     return function (){
        var now = +new Date();
        if(now - last > delay){
            method.apply(this,arguments);
            last = now
         }
    }
}

相关文章

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • 防抖和节流

    一、防抖:只执行最后一次 js防抖方法 一、节流:控制执行次数 节流

  • JavaScript:函数防抖与节流

    什么是函数防抖与节流? 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 定义: 防抖: n 秒后在...

  • 微信小程序防抖、节流的使用

    1、防抖、节流函数的封装 在utils文件夹下新建utils.js文件,然后写入节流和防抖函数 在.js页面引入并使用:

  • js函数的防抖(debounce)与节流(throttle)

    js 函数的防抖(debounce)与节流(throttle)[https://www.cnblogs.com/c...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • JS 节流与防抖

    本文的主角是节流 throttle 与防抖 debounce。 区别节流强调的是m秒内函数最多触发一次,注意这里的...

  • js防抖与节流

    在前端开发中会遇到一些频繁的事件触发,例如input,keyup,keydown,scroll,resize,mo...

  • js防抖与节流

    1.节流(throttle) 定义:先定义个执行周期,当时间执行时间大于等于执行周期,那就进入新的周期;如果小于执...

网友评论

    本文标题:js的节流与防抖

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