通过js给button按钮添加防抖/节流

阿里嘎吧创始人

已于 2022-11-08 11:29:50 修改

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-11-08 10:29:12 首次发布

本文链接：https://blog.csdn.net/YAYTXT/article/details/127745855

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<button onclick="debounceFn()">防抖点击</button>
// 无论点击了多少次，都会在最后一次点击了之后，再过两秒再执行回调函数
 const debounceFn = debounce(print, 2000)
 function debounce (callback, delay = 3000) {
    let timer = null
    return function () {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        callback()
      }, delay);
    }
  }
 function print () {
   console.log(123);
 }

 //------------节流（eg:2000内无论点击了多少次，都只执行第一次）-----------------------<button οnclick="debounceFn()">节流点击</button>
const throttleFn = throttle(print, 2000)
function throttle (callback, delay = 2000) {
  let timer = null
  return function () {
    if (timer) return
    callback()
    timer = setTimeout(() => {
      timer = null
    }, delay);
  }
}
function print () {
  console.log(123);
}