防抖函数小案例

先来看个防抖函数的例子

图还在传........

上一篇介绍了节流函数的案例，防抖和节流不同的是，想让小鸟跟着鼠标运动，等鼠标停在某个位置，超过多少时间，小鸟才过来，而不是随时过来，

主要来看下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，实现小鸟的移动。

标签：function,防抖,函数,timer,案例,y0,dur,bird
来源： https://blog.csdn.net/weixin_46249441/article/details/122685301