防抖函数小案例

先来看个防抖函数的例子

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

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

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

上一篇:数学建模学习4


下一篇:acwing 1299.五指山(扩展欧几里得算法)