函数防抖概念
在开发过程中经常使用函数防抖,举个例子,当用户在input框开始输入内容的时候就开始请求,很显然,这样的做法会使得前端不断地向服务器做请求,而且用户体验还不好,因此我们用到了函数防抖,即是任务频繁触发时,只有触发间隔时间超过指定时间时,任务才会执行。
手写debounce
在开发过程中,可以使用lodash的debounce,但是想自己写一个,原理就是创建一个定时器,每当触发事件时,就会重置定时器,这样也就是触发事件后不会直接执行,需要等指定时间后触发。
简单实现
/**
* @param {*} fn 需要执行的函数
* @param {*} wait 等待的时间
* @returns
*/
function debounce(fn, wait) {
let timer = null; // 定时器
let flag = false; // 是否进行过一次请求
// 返回函数
return function (event) {
// flag为true时,说明已经支付过一次了,再次触发,需要重新计时
// 需要将上次的timer清除掉,并将timer赋值于null,flag变成false
if (flag) {
clearTimeout(timer);
timer = null;
flag = false;
}
// 查看是否有定时器,如果有,则重置定时器,并将null赋值于timer
if (timer) {
clearTimeout(timer);
timer = null;
}
// 延时,如果执行了fn,则将flag转变为true
timer = setTimeout(() => {
console.log(event.target.value);
fn.apply(this, [event.target.value]);
flag = true;
}, wait);
}
}
demo测试
document.getElementById('debounce').addEventListener('keyup', debounce(request, 1000));
function request(content) {
console.log('request' + content);
}
测试通过
总结
自己手写的debounce其实还是很狭隘的,只能适用于自己的demo,在项目过程中可以用现有的轮子,但是通过自己写,可以复习到一些知识点,比如闭包,高阶函数等等,第一次写掘金,紧张,就这样啦~~~~