防抖实现:事件发生时延迟一段再去执行,如果在等待时间内,有同类型事件发生,等待时间重新计时--把多次执行变为最后一次执行
<script>
var oDiv = document.querySelector("div");
var n = 0;
oDiv.onclick = move;// 直接引用函数
function move() {
n += 15;
oDiv.style.left = n + 'px';
}
</script>
当没有设置防抖函数时,点击一次元素盒子移动一次,可以一秒之内点击多次让其多次移动。
<script>
var oDiv = document.querySelector("div");
var n = 0;
// oDiv.onclick = move;// 4.直接引用函数
// 4.直接引用函数
oDiv.onclick = debounce();
// 1.声明运动函数
function move() {
n += 15;
oDiv.style.left = n + 'px';
}
// 2.声明一个防抖函数
var timer = null;
function debounce() {
return function () {
// 5.每用一次清除一次定时器
clearTimeout(timer);
// 3.设置定时器 隔一段时间再去执行
timer = setTimeout(function () {
move();
}, 1000);
};
}
</script>
当设置防抖函数后,一秒内只能点击一次,多次点击无效。