前言
首先这是来自一道小组的面试题目，当小组伙伴出了这个题目，我首先是诧异这是啥高级玩意，后来被解释到就是为了防止连续点击，我心里想这不是很简单的策略就可以限制的吗，还有一个新的名词，太专业了。第一时间思考了一下，如何实现，是取最后一次还是定时取第一次？貌似在很多场景都是合理的，比如input输入更新，和按钮的连续点击....
看了几个博客，加上之前的脑补，是时候总结一下了.....
防抖
函数防抖（debounce）（连续触发只发生一次）
理解：连续触发一事件，取最后一次触发并让事件发生，这里的限制是要有指定的时间间隔，简言之一定时间间隔没有再次触发就执行一次处理函数。
案例：连续点击按钮，并不是立即执行按钮按下要触发的处理函数，当1s内没有触发新的点击事件时，才会延时触发一次处理函数。
定义：
// 定义
function debounce(func, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(func, wait);
}
}
使用：
// html
<div @click="onClick($event)" > </div>
// js
function handle() {
console.log(Math.random())
}
// 申请一个按钮处理函数
function btnClick = debounce(handle, 1000)
// 按钮点击事件
function onClick(){
btnClick()
}
实际使用就是：
- 定义处理函数和时间间隔
- 申请新的防抖函数
- 在点击事件中调用“申请的防抖函数”
不通用的快速写法
// html
<div @click="onClick($event)" > </div>
// js
// timeout定义在onClick外层作用域
let timeout = null
// 按钮点击事件
function onClick(){
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(
function(){
// 处理策略
},
wait);
}
函数节流（throttle）（连续触发，均匀发生多次，即使最后一个时间间隔只触发一次也保证发生）
理解：连续触发一事件且都会执行，会造成资源浪费、页面卡顿等，防抖可以解决这一问题，但是防抖没有保证事件在一定时间内肯定能发生一下，所以会有函数节流的概念，函数节流就是保证指定间隔里真正处理的事件最多只有一次，即在规定时间内减少函数执行次数。
案例：连续点击按钮，并不是立即执行按钮按下要触发的处理函数，当1s内都没有实际处理就触发处理函数，简单说连续触发保证1s内发生一次，没有事件就不触发。
定义：
function throttle(func, delay, duration){
var timer = null;
var begin = new Date();
return function(){
var context = this, args = arguments;
var current = new Date();
clearTimeout(timer);
if(current - begin >= duration){
func.apply(context, args);
begin = current;
}else{
timer = setTimeout(function(){
func.apply(context, args);
},delay);
}
}
}
使用：
// html
<div @click="onClick($event)" > </div>
// js
function handle() {
console.log(Math.random())
}
// 申请一个按钮处理函数
function btnClick = throttle(handle, 100，500)
// 按钮点击事件
function onClick(){
btnClick()
}
总结
函数防抖（debounce）（连续触发只发生一次）
函数节流（throttle）（连续触发，均匀发生多次，即使最后一个时间间隔只触发一次也保证发生）
网友评论