什么是防抖和节流？有什么区别？如何实现？

防抖和节流本质上都是用来防止高频率的js代码的执行，从而提高代码执行速度。

防抖:触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

防抖的本质就是不管触发多少次事件，只会执行最后一次事件。就像你去游乐园玩一个多人项目，这个项目需要上来很多人，但是并不是每个人上来这个项目都要重新开始一遍，而是等所有人都上齐了再开始，这就像我们的代码，等人齐了就是我们的执行条件。由这个例子也可以得出我们实现防抖的思路就是：我们在每次触发事件时都取消之前的延时调用方法，代码实现如下：

<button class="fd">防抖</button>.  (html)

let fd = document.querySelector('.fd')

let timeId

fd.addEventListener('click', () => {

clearTimeout(timeId)

timeId = setTimeout(() => {

console.log('需求');

}, 1000);

})           (js)

节流:高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率,节流的本质也就是在一定时间内连续触发事件，但事件只会执行一次。就像你在打游戏，打王者荣耀的时候，你可能在1秒内点了100下普攻键，但是你的攻速是有限的，这一秒里你只能打到敌人一下，由此也可以得到我们实现节流的思路：每次触发事件时都判断当前是否有等待执行的延时函数，代码实现如下：

<button class="jl"> 节流</button>          (html)

let jl = document.querySelector('.jl')

let ok = true;

jl.addEventListener('click', () => {

setTimeout(() => {

if (!ok) { return }

ok = false;

let timer = setTimeout(() => {

console.log("需求");

clearTimeout(timer);

ok = true;

}, 1000);

}, 1000);

})

以上内容来源于网络搜索及个人理解，如有不正欢迎斧正，如有侵权可联系删除