手写防抖和节流

最新推荐文章于 2024-05-27 20:46:11 发布

我的同桌朱丽叶

最新推荐文章于 2024-05-27 20:46:11 发布

阅读量228

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_68902642/article/details/125952182

版权

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

举例：

监听拖拽滚动条，然后频繁向下滚动信息，会变得很慢，很迟钝。
点击提交表单后，用户在结果还没出来的时候重复触发。

简单来说：某件事你并不想它太过频繁触发，那么设置一个定时器，每次进来的时候都清除原本的定时器，然后重新开始计时

手写防抖

设置定时器
设置一个闭包，返回一个方法
如果反复进来，清空前面的定时器，再重新设置一遍

function debounce(fn) {
  let timer = null;
  return function() {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.call(this.arguments);
    }, 1000);
  }
}

应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-