您当前的位置: 首页 > 

@大迁世界

暂无认证

  • 2浏览

    0关注

    739博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

09.debounce 方法

@大迁世界 发布时间:2021-06-28 08:29:34 ,浏览量:2

使用方便有用的方法,以减少代码行数,提高我们的工作效率,增加我们的摸鱼时间。

debounce 方法

创建一个debdeprecated函数,该函数将延迟调用所提供的函数,直到自上次调用该函数后至少经过ms毫秒。

debounce 想必有开发经验前端基本都用过,在这里就不多解释,直接来看实现。

实现

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
     clearTimeout(timeoutId);
  }
}

说明一下:

  • 每次调用debounced函数时,用``clearTimeout()清除当前的待定的timeout,并使用setTimeout()创建一个新的timeout,将调用函数的时间推迟到至少ms毫秒之后。

  • 使用function.prototype.apply()this上下文应用于函数并提供必要的参数。

  • 省略第二个参数,ms,将使用默认值0ms

大白话翻译一下就是,如果当前函数被调用,在指定ms时间内,如果还有函数进来,则清到已定时的函数,重新生成一个新的定时函数。 如果在指定的ms后,没有新的函数进来,则执行已定时的函数。

示例

window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250);
);

说明:当窗口大小不断变化时,控制台不会打印任务东西,直到250m后窗口不变化时才打印。

关注
打赏
1664287990
查看更多评论
立即登录/注册

微信扫码登录

0.0384s