javascript中的防抖与节流
2021-12-12 本文已影响0人
听书先生
1、函数防抖
在事件被触发设定的秒数之后再去执行回调函数，且在一定的时间内反复触发的话会进行重新计时。
函数防抖的优势主要用于交互层，最常见的是动态搜索框，如果不做防抖处理会不断的向服务器去查询数据，而最好的解决办法是让用户停止输入的时候再去进行查询搜索。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="input">
<script>
let ele = document.getElementById('input');
function ajax(content) {
console.log('send ' + 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 fun = debounce(ajax, 500)
ele.addEventListener('keyup', function (e) {
fun(e.target.value);
})
</script>
</body>
</html>
2、函数节流
函数节流指的是在一定的单位时间内，只能触发一次函数，如果一定时间内触发多次，只有一次生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="input">
<script>
let ele = document.getElementById('input');
function sendMsg(content) {
console.log('send ',content);
}
// 简单的`throttle`函数实现
var throttle = function (func, wait) {
var lastTime = 0 // 用来记录上次执行的时刻
// 返回包装过的throttle函数
return function (...args) {
var now = Date.now()
var coolingDown = now - lastTime < wait;
if (coolingDown) {
return
}
// 记录本次执行的时刻
lastTime = Date.now()
func.apply(null, args)
}
}
var fun = throttle(sendMsg,2000);
ele.addEventListener('keyup', function (e) {
fun(e.target.value)
})
</script>
</body>
</html>
3、区别
-
相同点：
debounce防抖与throttle节流都实现了单位时间内，函数只执行一次 -
不同点：
debounce防抖：
一定时间内，前面反复触发的事件，只会响应最新的，并在一定的秒数后执行。
throttle节流：
响应第一次的，单位时间内，不再响应，直到一定的秒数后才再次响应。
4、应用情景
-
debounce：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次 -
throttle：
监听滚动事件，比如是否滑到底部自动加载更多，就可以使用throttle来判断
