美文网首页
实现js防抖

实现js防抖

作者: pumpkin1024 | 来源:发表于2021-03-12 14:09 被阅读0次

防抖(debounce)

第一步

  1. 实现一个函数,返回一个函数func
  2. 参数,第一个参数是一个函数,第二个参数是一个数字time
  3. 当频繁调用返回的函数func时,在time毫秒时间内不执行,当最后一次调用后,过time毫秒后执行一次函数
function debounce(func, timeout) {
  let timer;
  return function () {
    if (timer) {
      // 如果在timeout秒调用 清空定时器
      clearTimeout(timer);
    }
    // 每次调用都指定timeout后再执行
    timer = setTimeout(() => {
      timer = null;
      func();
    }, timeout);
  };
}

第二步

  1. 函数可以传参数
  2. 在func调用时要使用function ()的上下文this
function debounce(func, timeout) {
  let timer;
  return function () {
    if (timer) {
      // 如果在timeout秒调用 清空定时器
      clearTimeout(timer);
    }
    // 每次调用都指定timeout后再执行
    timer = setTimeout(() => {
      timer = null;
      func.apply(this, Array.from(arguments));
    }, timeout);
  };
}

相关文章

  • 实现js防抖

    防抖(debounce) 第一步 实现一个函数,返回一个函数func参数,第一个参数是一个函数,第二个参数是一个数...

  • js防抖节流实现

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

  • js实现防抖函数

    函数防抖 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事...

  • js实现点击防抖

    js防抖可以让被调用的函数在连续高频操作过程中只调用一次,使用场景:有oninput, onmousemove, ...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • js函数防抖、节流实现

    React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例。...

  • js 实现防抖与节流

    鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作...

  • JS函数防抖

    JS 中的函数防抖 一、什么是函数防抖? 概念: 函数防抖(debounce), 就是指触发事件后,在 n 秒内函...

  • underscore源码解读之debounce

    刚写完一篇debounce(防抖)函数的实现,我又看了下underscore.js的实现方法。算是趁热打铁,分析一...

  • 防抖和节流

    一、防抖:只执行最后一次 js防抖方法 一、节流:控制执行次数 节流

网友评论

      本文标题:实现js防抖

      本文链接:https://www.haomeiwen.com/subject/tnlzqltx.html