js节流防抖函数手写（js节流和防抖的区分和实现详解）

通过具体的 Demo 来分别先说下「节流」和「防抖」。

「节流」

概念：如果一个方法被大量频繁执行，一定会有严重性能损耗，所以，我们可以将大量事件按时间做平均分配。本来执行100次的方法，我们可以缩短到20次，例如鼠标 mousemove 事件和 Demo 拖拽操作，更是会触发大量重排、重绘。所以，资源能省就省。

直接看代码：

//函数节流function throttle(fn, delay) {    //先定义一个 最后的时间戳     let lastTimer = null;    return function(){        //获取当前时间戳        let nowTimer = Date.now();        //如果最后时间没有被赋值过，并且当前时间比最后时间大于 delay 的毫秒数，则执行        if( !lastTimer || nowTimer - lastTimer > delay ){            lastTimer = nowTimer;//赋值 最后时间戳            fn.apply(this,arguments);//给定 this，然后提供 arguments 参数        }    }};

上面代码通过保存上一次执行事件的时间戳和当前时间戳的「差值」来做判断，可以通过例子来检验一下：

<div id=\\\"mouseDemo\\\" class=\\\"mouseDemo\\\"></div>
let mouseDemo = document.getElementById(\\\'mouseDemo\\\');mouseDemo.addEventListener(\\\'mousedown\\\', event => {    let startX = event.clientX;    let move = throttle(event=>{        console.log(event)    },100);    let up = () => {        document.removeEventListener(\\\'mousemove\\\', move);        document.removeEventListener(\\\'mouseup\\\', up);    }    document.addEventListener(\\\'mousemove\\\', move);    document.addEventListener(\\\'mouseup\\\', up)})

上面是鼠标滑动的代码，我们监听「mousemove」事件，输出当前鼠标事件，通过 throttle 可以每隔 100 毫秒来输出一次。

「防抖」

概念：当我们做响应式页面的时候，会监听窗口大小的改变，当浏览器宽度到达某一个阙值，就去执行相应的事件方法。onsize 触发时会有大量事件，而我们可以把多次事件合并一下，只让它响应一次；

//函数防抖let throttle = function(fn, delay) {    let timer = null;//先定义一个参数，做为 setTimeout 定时器的编号    return function(){        clearTimeout(timer);//无论如何，先清除定时器编号 timer        timer = setTimeout(()=>{            //改变this,并提供参数            fn.apply(this,arguments)        },delay)    }};

上面的代码通过 setTimeout 定时器，设置在一定时间内，某个事件只触发一次。

let myFunc = ()=>{    console.log(1);}//当浏览器窗口发生变化时，执行函数；window.onresize = throttle(myFunc,200);//window.onresize = myFunc(); //对比代码

两个案例，可以查看 Git 仓库获取：

https://github.com/cuishunbiao/Frontend-02-Template/tree/master/week13/jsx/extend

图片授权基于 www.pixabay.com 相关协议

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34502.html

js节流防抖函数手写（js节流和防抖的区分和实现详解）

相关推荐

睿旗资讯：录播服务器应用场景及优势

高效稳定的开源发卡系统，简单易用

电脑无法复制粘贴怎么办，这几种方法教你解决

service四层负载均衡（负载均衡4层和7层的区别）

发表回复