WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

js中的防抖和节流函数

一步步实现js防抖和节流函数

节流

每隔一段时间,只会执行一次回调函数。

场景

对于一些触发频率很高的回调函数,可以使用函数节流优化,如window.onresizewindow.onscorll等事件。

window.onresize = function(){ fn(); }

在这里如果我们改变窗口大小,fn会被频繁执行多次。

应用节流函数

function throttle(fn, delay = 100){ var timer = null; return function() { if (timer) { return; } timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay) } } function fn(){ console.log(1) } window.onscorll = throttle(fn, 1000);

应用函数节流后,window.onscorll每次触发时,都会执行throttle返回的匿名函数,在该函数中,可以获取到throttle中的timer变量用于判断是否到了delay时间,从而执行fn函数

上方节流函数的一些问题:

在设置好delay后,意味着fn最大延迟执行时间就是delay,用户停止滑动后最多要等待delay时间才会有相应。

防抖

每次事件的触发都会延时fn执行。

场景

公交等人案例: 公交车到站后会打开前门等待乘客上车,司机开门后会等待5秒,若是这5秒内没有人上车则关闭车门,若是5秒内有人上车则重置等待时间,直到5秒内没有上车的乘客为止。

公交车等人案例就是一个典型的防抖场景,我们将公交车关门事件比作回调函数,乘客上车比作事件触发,就是一个防抖函数。

function debounce(fn, delay) { var timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } function fn() { console.log(1) } document.onclick = debounce(fn, 1000);

应用

用户执行模糊搜索时,我们在搜索框的onChange事件中向后台请求搜索。这样搜索频率太高了,造成服务器压力大。

解决方案是使用函数防抖,在用户输入后等待一段时间在向服务器发送请求,若是在这段时间内用户继续输入则重置等待时间即可

function debounce(fn, delay) { var timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } function fn() { ajax(...) } document.querySelector(".search").onChange = debounce(fn, 500)