2020-05-15 前端防抖、节流
2020-05-15 本文已影响0人
追寻1989
1.JS的防抖、节流及使用场景
知识铺垫
阅读本文你可能需要先了解这两个知识点：
call()和apply()方法和区别
浅谈js中的闭包
概念和例子
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
没有防抖和节流的时候：
//模拟一段ajax请求
function ajax(content) {
console.log('ajax request ' + content)
}
let inputa = document.getElementById('unDebounce')
inputa.addEventListener('keyup', function (e) {
ajax(e.target.value)
})
可以看到，我们只要按下键盘，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：
加入防抖：
function ajax(content) {
console.log('ajax request ' + content)
}
function debounce(fun, delay) {
return function (args) {
let that = this
let _args = args
clearTimeout(fun.id)
fun.id = setTimeout(function () {
fun.call(that, _args)
}, delay)
}
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
debounceAjax(e.target.value)
})
看一下运行结果：
可以看到，我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。
加深理解防抖：
let biu = function () {
console.log('biu biu biu',new Date().Format('HH:mm:ss'))
}
let boom = function () {
console.log('boom boom boom',new Date().Format('HH:mm:ss'))
}
setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)
这个栗子就很好的解释了，如果在时间间隔内执行函数，会重新触发计时。biu会在第一次1.5s执行后，每隔1s执行一次，而boom一次也不会执行。因为它的时间间隔是2s，而执行时间是1s，所以每次都会重新触发计时
就像魔兽世界里面术士的技能条一样 如果技能条被打断了 就要从新读条
加入节流：
function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = arguments
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
}else {
last = now
fun.apply(that,_args)
}
}
}
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function(e) {
throttleAjax(e.target.value)
})
看一下运行结果：
可以看到，加入节流后，我们在不断输入时，ajax会按照我们设定的时间，每1s执行一次。
结合刚刚biubiubiu的栗子：
let biubiu = function () {
console.log('biu biu biu', new Date().Format('HH:mm:ss'))
}
setInterval(throttle(biubiu,1000),10)
不管我们设定的执行时间间隔多小，总是1s内只执行一次。
个人理解： 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
总结
函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
防抖（空闲控制）指在时间n内，函数被触发多次，但是只执行一次，执行最新的触发。也就是在时间n内，碰到新的触发，就清除之前的，重新计时。
节流（频率控制 ）指当持续触发某个事件时，会有规律的每隔时间n就执行一次函数。
区别图解
可以参考防抖和节流的区别
https://blog.csdn.net/qq_35585701/article/details/81392174
https://blog.csdn.net/hyeeee/article/details/96432062
使用场景
1.debounce
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。
2.throttle
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。
项目中封装好的debounce和throttle函数
/**
* 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
*
* @param {function} func 传入函数，最后一个参数是额外增加的this对象，.apply(this, args) 这种方式，this无法传递进函数
* @param {number} wait 表示时间窗口的间隔
* @param {boolean} immediate 设置为ture时，调用触发于开始边界而不是结束边界
* @return {function} 返回客户调用函数
*/
const debounce = function(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
let last = Number(new Date()) - timestamp;
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.call(context, ...args, context);
if (!timeout) {
context = args = null;
}
}
}
};
return function(..._args) {
context = this;
args = _args;
timestamp = Number(new Date());
const callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) {
result = func.call(context, ...args, context);
context = args = null;
}
return result;
};
};
/**
* 频率控制 返回函数连续调用时，func 执行频率限定为 次 / wait
*
* @param {function} func 传入函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始边界上的调用，传入{leading: false}。
* 如果想忽略结尾边界上的调用，传入{trailing: false}
* @return {function} 返回客户调用函数
*/
const throttle = function(func, wait, options) {
let context, args, result;
let timeout = null;
// 上次执行时间点
let previous = 0;
if (!options) options = {};
// 延迟执行函数
let later = function() {
// 若设定了开始边界不执行选项，上次执行时间始终为0
previous = options.leading === false ? 0 : Number(new Date());
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function(..._args) {
let now = Number(new Date());
// 首次执行时，如果设定了开始边界不执行选项，将上次执行时间设定为当前时间。
if (!previous && options.leading === false) previous = now;
// 延迟执行时间间隔
let remaining = wait - (now - previous);
context = this;
args = _args;
// 延迟时间间隔remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间窗口
// remaining大于时间窗口wait，表示客户端系统时间被调整过
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
//如果延迟执行不存在，且没有设定结尾边界不执行选项
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div><button onclick="test()">防抖</button></div>
<div><button onclick="test2()">节流</button></div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
debounceAjax = debounce(function(arg){
console.log(arg)
},1000)
throttleAjax = throttle(function(arg){
console.log(arg)
},1000)
}
function test(){
debounceAjax('aaaaaaaa')
}
function test2(){
throttleAjax('bbbbbbb')
}
</script>
