先来看个防抖函数的例子
图还在传........
上一篇介绍了节流函数的案例,防抖和节流不同的是,想让小鸟跟着鼠标运动,等鼠标停在某个位置,超过多少时间,小鸟才过来,而不是随时过来,
主要来看下Javascript部分是如何实现的
setInterval(function(){
bird.className = "sprite " + 'bird' + ((i++) % 3);
}, 1000/10);
function debounce(fn, dur){
dur = dur || 100;
var timer;
return function(){
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, dur);
}
}
document.addEventListener('mousemove', debounce(function(evt){
var x = evt.clientX,
y = evt.clientY,
x0 = bird.offsetLeft,
y0 = bird.offsetTop;
console.log(x, y);
var a1 = new Animator(1000, function(ep){
bird.style.top = y0 + ep * (y - y0) + 'px';
bird.style.left = x0 + ep * (x - x0) + 'px';
}, p => p * p);
a1.animate();
}, 100));
设置一个timer,先每次都clear,但是当时间超时了,停下来了,才回去调用这个function,实现小鸟的移动。