防抖(debounce)和节流(throttle)的学习总结

防抖(debounce)

用户与网页进行交互时,经常出现根据页面的状态、数据向服务器请求、发送数据的场景,比如:根据用户的输入数据进行实时校验,下拉请求数据等等,如果用户操作过于频繁,页面状态、数据变化的太快太频繁,会进行多次请求,这其中的很多请求都是没有意义的,实时校验,只需要校验用户最后的输入,下拉请求只需要在用户下拉的最后一次进行请求。这就需要防抖来实现了。 防抖的原理:为事件触发时调用的函数添加延迟,如果在延迟内频繁触发,上一次的事件触发会被取消,延迟将会重新计算,这样一来用户的最会一次触发,函数才会真正被调用。

//fn为回调函数,delay是人为设置的延迟
function debounce(fn, delay){
    var timeout; //定时器编号
    return function(){
        //context是回调函数运行的环境, 
        //args是回调函数的参数,一般是addEventListener传进来的event变量
        var context = this, args = arguments;
        clearTimeout(timeout);//当用户频繁触发事件时,定时器被清除
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//调用方式
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector('input').addEventListener('input', validate);

节流(throttle)

节流,顾名思义就是把管道的阀门稍稍关紧一点,让水流动的少一点。在javascript中,很多事件是连续触发的,比如:resize,mousemove。我们不希望事件频繁触发,如果采用防抖方案,事件只在延迟时间内触发最后一次,这显然是不合理的,我们只需要让其触发的频率低一些,这就需要节流来实现。 节流原理:为事件触发时调用的函数添加时间阈值,只有在超过时间阈值时触发事件,回调函数才会被调用。

//fn为回调函数,threshhold是时间阈值
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context是回调函数运行的环境, 
        //args是回调函数的参数,一般是addEventListener传进来的event变量
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //通过连续两次触发的时间间隔,决定是否调用回调函数
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //当连续触发行为结束时,还要进行最后一次函数回调
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//调用函数
var mousemove = throttle(function(e) {
 //do somthing
});

// 绑定监听
document.querySelector("#panel").addEventListener('mousemove', mousemove);

以下是html页面

<div id='panel' style="background:blue;width:100vw;height:100vh">

 </div>

最后,大家可以通过这个动画来理解,学习防抖和节流。

原文链接:segmentfault.com

上一篇:微信开发-获取用户授权-node.js实现
下一篇:代码写的怀疑人生--- 如果写出一个可编辑的树---原创

相关推荐

  • 项目启动提示安装 throttle-debounce/debounce throttle-debounce/throttle

    项目启动提示:npm install save throttledebounce/debounce throttledebounce/throttle,但是又无法安装问题: 在最近正常运行的项目中,确...

    2 个月前
  • 防抖(debounce)和节流(throttle)---解决事件频繁触发造成页面卡死

    连续触发(触发频率很高)的时间,不进行优化,会出现页面卡顿现象。 常见的需要优化的事件: 鼠标事件: mousemove(拖拽) mouseover(划过) ...

    1 年前
  • 防抖和节流的实现、区别与应用场景

    应用: 在我们开发过程中,会有一些用户操作,如滚动事件,输入事件等导致一直重复调用某函数,频率无限,使浏览器负担过重,导致页面卡顿。这时候就会用到防抖和节流来控制调用频率,减少浏览器负担。

    7 个月前
  • 防抖和节流的实现

    防抖(debounce) 防抖的作用是将多个连续的调用合并为一次调用。作用见参考资料1。 1. 两次调用的间隔小于,则视为连续的调用。 2. 如果距离上次调用已经过去了的时间,则说明该轮连续...

    2 年前
  • 防抖和节流(较全&可体验)

    (https://img.javascriptcn.com/3c2d27a3a2e77b5c149efb2cd4a1b942) 防抖(debounce) 概念 事件被触发经过单位时间(del...

    7 个月前
  • 防抖动处理和节流 小技巧

    1. 简单的防抖动处理,一秒内点击一次 2. 向服务器请求数据 点击按钮向后台请求数据 优化点: 另外一些防抖动的小技巧,请参考: http://blog.csdn.net/crys...

    2 年前
  • 防抖与节流(源码学习)

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore(https://github.com/jashkenas/und...

    2 年前
  • 防抖、节流

    防抖(debounce) n秒内执行多次同一函数只有最后一次有效。 实现方式:使用计时器,在 n 秒内再执行该函数,如果 n 秒内再次调用该函数,则重置计时器。 节流(throttle) n秒内执行多...

    3 天前
  • 重拾JS——防抖与节流

    防抖 与 节流 是前端在优化性能问题上,经常使用的两种技术手段。比如 input,scroll,resize,mousemove 等事件,如果不加以控制,频繁的触发,无疑将会带来额外的性能开销,极端情...

    1 个月前
  • 说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

    为何要防抖和节流 有时候会在项目开发中频繁地触发一些事件,如 、 、 、 等,或者诸如输入框的实时搜索功能,我们知道如果事件处理函数无限制调用,会大大加重浏览器的工作量,有可能导致页面卡顿影响体验...

    1 年前

官方社区

扫码加入 JavaScript 社区