我的前端学习笔记📒
最近花了点时间把笔记整理到语雀上了，方便童鞋们阅读
最近公司做一个内部的搜索系统，因为搜索框需要搜索功能需要频繁的去发送请求，这很明显的会给服务器带来压力，那么这时候就要用到防抖和节流的知识点了
防抖函数debounce
比如我们的百度搜索，搜索的时候有关键字的提醒，关键字的来源来自于客户端向服务端请求得到的数据，我们通过keyup事件去监听触发请求，如果返回值的搜索key已经不是搜索框现在的值，就丢弃掉这次返回，于是我们提出这样一个优化需求：触发事件，但是我一定在事件触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行
那么我们来动手实现我们的第一版的防抖函数吧：
function debounce(fn,wait){
let timeout
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout=setTimeout(fn,wait)
}
}
第一版代码已经实现了，我们来写个demo验证下吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#search {
width: 400px;
margin-left: 300px;
margin-bottom: 50px;
}
#showSearch {
width: 800px;
height: 100px;
background: lightblue;
color: red;
margin-left: 300px;
}
</style>
</head>
<body>
<input type="search" name="" id="search" />
<div id="showSearch"></div>
</body>
<script>
function debounce(fn, wait) {
let timeout;
return function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(fn, wait);
};
}
let search = document.querySelector("#search");
let showSearch = document.querySelector("#showSearch");
function getSearchInfo(e) {
// showSearch.innerText = this.value; // 报错
// console.log(e); // undefined
showSearch.innerText = search.value;
}
search.onkeyup = debounce(getSearchInfo, 1000);
</script>
</html>
效果图：
可以看到执行上面的demo，我们输入值以后不触发keyup事件就会隔1秒钟蓝色div才会出现字，如果你一直触发是不会显示的等到你停止触发后的一秒后才显示
有同学可能对第一版代码觉得挺简单的，确实简单，不过我还是要啰嗦几句，第一版的代码中，debounce函数返回了一个匿名函数，而这匿名函数又引用了timeout这个变量，这样就形成了闭包，也就是函数的执行上下文的活动对象并不会被销毁，保存了timeout变量，才能实现我们这个如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行的需求
修复this指向和event问题
显然上述中的代码还存留了二个问题就是this问题，我们this指向的不是window对象，而是指向我们的dom对象，第二个就是event对象，event对象在这里会报undefined，那么接下来我们来完善我们的第二版代码吧：
第二版本的防抖函数
function debounce(fn, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
fn.apply(context, args);
}, wait);
};
}
第二版代码已经实现了，我们来写个demo验证下吧：
let search = document.querySelector("#search");
let showSearch = document.querySelector("#showSearch");
function getSearchInfo(e) {
showSearch.innerText = this.value;
console.log(e);
}
search.onkeyup = debounce(getSearchInfo, 1000);
效果图:
这里涉及的知识点就是this指向和arguments、apply等，先来说说arguments属性，我们知道可以通过arguments属性获取函数的参数值，而dom事件操作中，会给回调函数（这里回调函数是debounce函数返回的闭包函数）传递一个event参数,这样我们就可以通过arguments属性拿到event属性，那么问题二就解决啦，再来说说问题一的this指向，此时这里keyup事件的回调函数是debounce函数返回的闭包函数而不是getSearchInfo函数（但是我们希望处理业务逻辑的getSearchInfo的this指向能够指向dom对象），我们知道this的指向是我最后被谁调用，我就指向谁，那么我这里被search调用所以this指向search，但是由于有setTimeout异步操作，我们getSearchInfo函数的this指向是window（非严格模式下），所以我们需要改变getSearchInfo的指向，这样我们用apply就完美实现了
立即执行
这时候我们开发的问题解决了，但是万恶的产品又提出了一个新的需求方案：我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行，那我们就来实现这个新需求吧
// 参数immediate值 true||false
function debounce(fn, wait, immediate) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) {
clearTimeout(timeout);
}
let callNow = !timeout;
if (immediate) {
// 已经执行过，不再执行
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
} else {
timeout = setTimeout(function() {
fn.apply(context, args);
}, wait);
}
};
}
demo使用:
search.onkeyup = debounce(getSearchInfo, 100, true);
效果图如下:
取消功能
虽然我们的防抖函数已经很完善了，但是我们希望它能支持取消的功能，那接着来完善我们的代码吧
第三版本的防抖函数
// 参数immediate值 true||false
function debounce(fn, wait, immediate) {
let timeout;
let debounced = function() {
let context = this;
let args = arguments;
if (timeout) {
clearTimeout(timeout);
}
let callNow = !timeout;
if (immediate) {
// 已经执行过，不再执行
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
} else {
timeout = setTimeout(function() {
fn.apply(context, args);
}, wait);
}
};
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced
}
修复result bug
到此，我们的防抖函数基本实现了，但是细心的同学可能会发现，如果fn函数参数存在return值，我们需要去接收它，那么来修复这个小Bug吧
第四版本的防抖函数
// 参数immediate值 true||false
function debounce(fn, wait, immediate) {
let timeout, result;
let debounced = function() {
let context = this;
let args = arguments;
if (timeout) {
clearTimeout(timeout);
}
let callNow = !timeout;
if (immediate) {
// 已经执行过，不再执行
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) {
result = fn.apply(context, args);
}
} else {
timeout = setTimeout(function() {
result = fn.apply(context, args);
console.log(result);
}, wait);
}
};
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced;
}
到这里我们的防抖函数已经实现了，大家可以动手实现下
防抖函数的总结
上面罗里吧嗦的说了一堆，实际上可以精简成两个需求
- 非立即执行:，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行
- 立即执行：我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行
我们可以按照立即执行和非立即执行这两个需求去理解我们的防抖函数
节流 throttle
持续触发事件，每隔一段时间，只执行一次事件。
节流相对来说还是很好理解了，当然了他也有跟防抖函数一样有立即执行和非立即执行两个需求，那我们实现throttle函数的代码吧
立即执行
我们可以使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0)，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行
function throttle(fn, wait) {
let context, args;
let previous = 0;
return function() {
let now = +new Date();
context = this;
args = arguments;
if (now - previous > wait) {
fn.apply(context, args);
previous = now;
}
};
}
demo使用：
demo跟上述防抖用是一样
search.onkeyup = throttle(getSearchInfo, 3000);
这里的节流立即执行版跟我们的防抖第一版的知识点原理一样，不再过多的赘述
非立即执行
非立即执行就是过了n秒后我们再执行，那么我们自然而然想到定时器
function throttle(fn, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
// 这里不需要清除定时器 清除了会重新计算时间
// 清除这个定时器不代表timeout为空
if (timeout) {
return false;
}
timeout = setTimeout(function() {
fn.apply(context, args);
timeout = null;
}, wait);
};
}
demo使用
function getSearchInfo(e) {
console.log(this.value);
// 验证的效果是 showSearch多久才能读到这个this.value
showSearch.innerText = this.value;
}
search.onkeyup = throttle(getSearchInfo, 3000);
这次的效果是等待过了三秒才执行，那我们来比较立即执行和非立即执行的效果
- 立即执行会立刻执行，非立即执行会在 n 秒后第一次执行
- 立即执行停止触发后没有办法再执行事件，非立即执行停止触发后依然会再执行一次事件
一统立即执行和非立即执行
我们的需求想要这样：我触发这个事件想要立即执行，事件停止触发后再执行一遍,也就是n秒内，假设我触发事件大于等于两次，先会立即执行，最后会再触发一次
function throttle(fn, wait) {
let timeout, remaining, context, args;
let previous = 0;
// timeout等于null,代表定时器已经完成
// 最后触发的函数
let later = function() {
previous = +new Date();
timeout = null;
fn.apply(context, args);
console.log("最后执行的");
};
let throttled = function() {
context = this;
args = arguments;
let now = +new Date();
// 下次触发fn剩余的时间
remaining = wait - (now - previous);
// 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
// 如果没有剩余的时间
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
// 立即执行
fn.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
效果图：
包含立即执行和非立即执行
有时候我们想要一种情况就行，想要立即执行不需要再去执行一次，或者想要最后执行一次，不需要立即执行，那我们对上述做个兼容
实现方式是定义一个options对象，禁止立即执行或者非立即执行
- immediate：false 表示禁用第一次执行
- last: false 表示禁用停止触发的回调
function throttle(fn, wait, options) {
let timeout, remaining, context, args;
let previous = 0;
// timeout等于null,代表定时器已经完成
// 如果没有传options默认为空
if (!options) {
options = {}; // 虽然没有声明options, 相当于window.options={}
}
let later = function() {
// previous = +new Date();
previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
timeout = null;
fn.call(context, args);
console.log("最后执行的");
};
let throttled = function() {
context = this;
args = arguments;
let now = +new Date();
if (!previous && options.immediate === false) {
previous = now;
}
// 下次触发 func 剩余的时间
remaining = wait - (now - previous);
// 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
// 如果没有剩余的时间了
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
// 立即执行
fn.apply(context, args);
} else if (!timeout && options.last !== false) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
demo使用：
search.onkeyup = throttle(getSearchInfo, 3000, { immediate: true, last: false });
优化throttle函数
上述例子中我们使用了闭包，而闭包所引用的变量挺多的，但是一直没有被gc回收，我们来手动回收下这些变量
function throttle(fn, wait, options) {
let timeout, remaining, context, args;
let previous = 0;
// timeout等于null,代表定时器已经完成
// 如果没有传options默认为空
if (!options) {
options = {}; // 虽然没有声明options, 相当于window.options={}
}
let later = function() {
// previous = +new Date();
previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
timeout = null;
fn.call(context, args);
if (!timeout) context = args = null;
console.log("最后执行的");
};
let throttled = function() {
context = this;
args = arguments;
let now = +new Date();
if (!previous && options.immediate === false) {
previous = now;
}
// 下次触发 func 剩余的时间
remaining = wait - (now - previous);
// 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
// 如果没有剩余的时间了
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
// 立即执行
fn.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.last !== false) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
取消功能
我们再拓展个取消功能，取消功能实际就是取消定时器，让它在这一次事件触发中立即执行
function throttle(fn, wait, options) {
let timeout, remaining, context, args;
let previous = 0;
// timeout等于null,代表定时器已经完成
// 如果没有传options默认为空
if (!options) {
options = {}; // 虽然没有声明options, 相当于window.options={}
}
let later = function() {
// previous = +new Date();
previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同于:new Date().getTime()
timeout = null;
fn.call(context, args);
if (!timeout) context = args = null;
console.log("最后执行的");
};
let throttled = function() {
context = this;
args = arguments;
let now = +new Date();
if (!previous && options.immediate === false) {
previous = now;
}
// 下次触发 func 剩余的时间
remaining = wait - (now - previous);
// 代表我这个定时器执行完了 那么就执行n秒后(比如：3~6秒)的事件操作
// 如果没有剩余的时间了
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
// 立即执行
fn.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.last !== false) {
timeout = setTimeout(later, remaining);
}
};
throttled.cancel = function() {
clearTimeout(timeout);
timeout = null;
previous = 0;
};
return throttled;
}
到这里我们的节流函数就基本实现完了，接下来那聊聊防抖函数和节流函数的区别吧
防抖和节流的区别
实际上防抖和节流都是限制一些频繁的事件触发（window 的 resize、scroll、mousedown、mousemove、keyup、keydown）,但他们还是有实质性的区别的
- 防抖是虽然事件持续触发，但只有等事件停止触发后n秒才执行函数(如果你在时间内重新触发事件，那么时间就重新算，这是防抖的特点，可以按照这个特点选择场景)。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷，司机才开车。
- 节流是持续触发的时候，每隔n秒执行一次函数比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释
总结
防抖函数和节流函数涉及到的知识点很多，他们以接收一个函数为参数，实际就是一个高阶函数，也用到了闭包，this指向，apply等知识点，当然函数的实现是参考大佬的博客，我这里就是做下记录以及总结
我的前端学习笔记📒
最近花了点时间把笔记整理到语雀上了，方便童鞋们阅读
