函数的防抖和节流

前端开发 作者: 2024-08-26 08:45:02
防抖 所谓防抖,就是指触发事件后在n秒内函数只能触发一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。 document.getElementById('btn').oncli
/*
  防抖函数
  @param {Function} func 要执行的函数
  @param {Number} wait 要等待的时间 ms
*/
function debounce(func,wait) {
  let timer = null;
  return  () {
    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);

  节流函数
  @param {Function} func 要执行的函数
  @param {Number} wait 要等待的时间 ms
 throttle(func,wait) {
  // 记录上一次函数触发的时间
  let lastTime = 0 () {
    let nowTime = Date.now();
    let context =  arguments;
    if (nowTime - lastTime > wait) {
       修正this指向
      func.apply(context,args);
      lastTime = nowTime;
    }
  }
};
// 使用方法 document.onmousemove
= throttle( () { console.log('函数触发了?') },200);
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68880.html
函数的防抖和节流