浅入防抖节流
2019-12-05 本文已影响0人
小本YuDL
问题：
窗口的 resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
解决：
可以采用 debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果
1.防抖
- 当持续触发事件时，debounce 会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件。
-
非立即执行版
image.png
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
-
立即执行版
image.png
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
2.节流
throttle（节流），当持续触发事件时，保证隔间时间触发一次事件。
持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。
image.png
简单的概念就是这样，那下面看下最简单的代码
<body>
<div id="container"></div>
<script>
var count = 1;
var container = document.getElementById('container');
1.普通
function counter() {
container.innerText = count++;
}
container.onmousemove = counter;
2.防抖(非立即执行)
function debounce(func, wait) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(func, wait);
console.log("now"+timeout);
}
}
container.onmousemove = debounce(counter, 500);
3.节流（时间戳）
function throttle(func, wait, ...args){
let pre = 0;
return function () {
const context = this;
let now = Date.now();
if (now - pre >= wait) {
func.apply(context, args);
pre = Date.now();
}
}
}
container.onmousemove = throttle(counter,1000);
</script>
</body>
