JS实现防抖(debounce)及节流(throttle)函数的实现教程
程序员文章站
2022-06-19 21:48:16
这两种函数算是应用场景比较广泛的函数了,那么如何实现它呢?
什么是防抖?什么是节流?
举例来说,比如要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求...
这两种函数算是应用场景比较广泛的函数了,那么如何实现它呢?
什么是防抖?什么是节流?
举例来说,比如要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。
实现这两种方法的核心其实都是settimeout方法。
防抖的实现思路:每次触发事件时都取消之前的延时调用方法:
function debounce(fn, delay) { let handle; return function (e) { // 取消之前的延时调用 cleartimeout(handle); handle = settimeout(() => { fn(e); }, delay); } }
测试:
function sayhi(e){ console.log(e.target.innerwidth, e.target.innerheight); } window.addeventlistener('resize', debounce(sayhi, 500));
效果:
节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数:
function throttle(fn, delay) { let runflag = false; return function (e) { // 判断之前的调用是否完成 if (runflag) { return false; } runflag = true; settimeout(() => { fn(e); runflag = false; }, delay) } }
测试:
function sayhi(e){ console.log(e.target.innerwidth, e.target.innerheight); } window.addeventlistener('resize', throttle(sayhi, 500));
效果:
推荐成熟的库方法:lodash