防抖函数小案例

2022-01-25 15:05:26 阅读：129 来源： 互联网

标签：function 防抖函数 timer 案例 y0 dur bird

先来看个防抖函数的例子

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

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

主要来看下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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

防抖函数小案例