防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
节流：在规定的单位时间段内，函数只能执行一次，在单位时间内多少触发，则只有一次有效
使用场景：
- 鼠标不断的点击，用节流来限制只在规定的单位时间内执行一次函数
- 滚轮事件, 不断的往下滚轮，比如滚动到底部加载数据
function jieliu(fn, delay) {
let timer;
return function() {
if(!timer) {
fn.apply(this,arguments)
timer = setTimeout(()=>{
clearTimeout(timer);
timer = null;
},delay)
}
}
}
function dy (val) {
console.log('点击了',val)
}
let jieliuFun = jieliu(dy, 1000)
let appDom = document.querySelector('#app')
appDom.addEventListener('click', function(e) {
jieliuFun('asdasd')
})
防抖：事件被触发时，在n秒后执行函数，在n秒内多次触发事件，则重新开始计时.
适用场景：
- 搜索输入框搜索内容，用户在不断的输入的时候，用防抖来节约请求资源
- 不断的触发window的resize事件，不断的改变窗口大小，利用防抖函数来只执行一次
// 定义一个请求函数
function request(val) {
console.log("request: " + val);
}
// 定义一个防抖函数
function debounce(fn, delay) {
let timeout;
return function(){
clearTimeout(timeout)
timeout = setTimeout(()=>{
fn.apply(this, arguments)
},delay)
}
}
let inputEl = document.getElementById("input");
let debounceInput = debounce(request, 500)
inputEl.addEventListener("keyup", function (e) {
debounceInput(e.target.value);
});
防抖 (debounce)
防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。
想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存
function debounce (f, wait) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
f(...args)
}, wait)
}
}
节流 (throttle)
节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
scroll 事件，每隔一秒计算一次位置信息等浏览器播放事件，每个一秒计算一次进度信息等input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)
function throttle (f, wait) {
let timer
return (...args) => {
if (timer) { return }
timer = setTimeout(() => {
f(...args)
timer = null
}, wait)
}
}
总结 (简要答案)
防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁
网友评论