函数的防抖和节流

Posted z937741304

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数的防抖和节流相关的知识,希望对你有一定的参考价值。

防抖

所谓防抖,就是指触发事件后在n秒内函数只能触发一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。

/*
  防抖函数
  @param Function func 要执行的函数
  @param Number wait 要等待的时间 ms
*/
function debounce(func, wait) 
  let timer = null;
  return function () 
    let context = this;
    let args = arguments;

    timer && clearTimeout(timer);
    timer = setTimeout(() => 
      func.apply(context, args)
    , wait);
  


// 使用方法
document.getElementById(‘btn‘).onclick = debounce(function ()
  this.innerhtml = ‘按钮‘ + num++;
, 200);

 

节流

所谓节流,就是指连续触发事件,但是在n秒中只执行一次函数。

/*
  节流函数
  @param Function func 要执行的函数
  @param Number wait 要等待的时间 ms
*/
function throttle(func, wait) 
  // 记录上一次函数触发的时间
  let lastTime = 0;
  return function () 
    let nowTime = Date.now();
    let context = this;
    let args = arguments;
    if (nowTime - lastTime > wait) 
      // 修正this指向
      func.apply(context, args);
      lastTime = nowTime;
    
  
;
// 使用方法 document.onmousemove
= throttle(function () console.log(‘函数触发了?‘) , 200);

 

以上是关于函数的防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章

JS的防抖和节流

函数的防抖和节流

javascript的防抖和节流

js的防抖和节流

js的防抖、节流

Javascript函数的防抖和节流