为什么要做防抖？
当我们监听用户操作时，用户操作过快，导致监听到函数重复调用。而前面的N次操作对于我们来讲又是无效的操作，只需要用户的最后一次操作。这时候就需要我们用防抖函数啦。
防抖函数应用的基本原则
防抖函数不是想用就用的，只有在一定条件下才适合用防抖函数！！！
1. 请求的函数操作非常耗时，比如网路请求、复杂的计算等等... ...
2. 该函数被频繁的触发，但墙面的触发对于程序而言毫无意义，只有最后一次触发才有意义
在遵循了以上俩原则的基础上我们就可以运用防抖函数解决问题啦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
</head>
<body>
<input type="text" />
<script>
// 防抖函数
function debounce (fn, duration) {
var timerId = null;
return function () {
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
// 将该函数的this传递给fn
var that = this;
// 将该行数的参数全部传递给fn
var args = Array.prototype.slice.call(arguments, 0);
timerId = setTimeout(() => {
fn.apply(that, args);
}, duration);
}
}
var iptHandler = debounce(function (e) {
console.log( e, this.value, '耗时操作');
}, 1000);
var ipt = document.querySelector("input");
ipt.addEventListener('keyup', iptHandler);
var mouseHandler = debounce(function () {
console.log('鼠标移动了');
}, 1000)
window.addEventListener('mousemove', mouseHandler);
</script>
</body>
</html>
网友评论