（函数防抖和节流是什么意思？分别用于什么情况下)
http://www.jb51.net/article/105601.htm
一、函数防抖
1、什么是函数防抖
函数去抖（debounce）：就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算，直到该函数在一定间隔内没有被调用时，才开始执行被调用方法。
2、应用场景
- 用户注册时候的手机号码验证和邮箱验证
- 搜索框(input)
3、通用写法
// 去抖动
export const debonceFn = (interval, cb) => {
let timeout = null
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => cb.apply(this, arguments), interval)
}
}
// 示例1
window.addEventListener('resize', debonceFn(250, () => {
window.location.reload()
}))
// 示例2
doResizeEffect = () => {
const fn = debonceFn(250, () => {
const height = document.getElementsByClassName('stocks-commit-handicap')[0].clientHeight
const chartHeight = calBodyHeight() - 65 - 11
const dealHeight = chartHeight - height
this.setState({
chartHeight: chartHeight,
dealHeight: dealHeight
})
})
window.addEventListener('resize', fn)
return () => {
window.removeEventListener('resize', fn)
}
}
4、举例
应用场景：假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。
我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。
这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。
我们想要的是用户停止输入的时候才去触发查询的请求，这时候函数防抖可以帮到我们。
// 简单示例
window.addEventListener('resize',function(e){
var t;
return function(){
if(t) clearTimeout(t);
t = setTimeout(function(){
// do something...
},500);
}
}());
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
二、函数节流
1、什么是函数节流
函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。
即每间隔某个时间去执行某函数，避免函数的过多执行，这个方式就叫函数节流
2、应用场景
window对象的resize、scroll事件
拖拽时的mousemove事件
射击游戏中的mousedown、keydown事件
文字输入、自动完成的keyup事件
3、通用写法
// 函数节流
export const throttleFn = (interval, cb) => {
let oldDate = 0
return function() {
let newDate = new Date()
if (newDate - oldDate > interval) {
oldDate = newDate
return cb.apply(this, arguments)
}
}
}
// 用法示例——绑定按键
bindKey = (table) => {
// 节流时间间隔
let interval = 66
let throttleEvent = throttleFn(interval, (e) => {
const keyCode = e.keyCode
if (keyCode === 38) {
// up
this.upHandler(table)
}
if (keyCode === 40) {
// down
this.downHandler(table)
}
if (keyCode === 37) {
// left
this.leftHandler(table)
}
if (keyCode === 39) {
// right
this.rightHandler(table)
}
if (keyCode === 13) {
// enter
this.enterHandler(table)
}
})
window.onkeydown = (e) => {
e.preventDefault()
const keyCode = e.keyCode
throttleEvent(e)
}
}
4、举例说明
应用场景：滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。
同样的，如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用了。
但是这次的情况跟上面的有所不同，我们不是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行。
// 简单的节流函数
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
