大部分人都被误导的js中防抖与节流的写法

最新推荐文章于 2024-02-01 09:35:36 发布

new 前端

最新推荐文章于 2024-02-01 09:35:36 发布

阅读量198

点赞数

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

版权与解释权归本博客博主所有转载请注明出处，否则追究其法律责任！

本文链接：https://blog.csdn.net/qq_36131502/article/details/121184517

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

# 先说一下我是如何发现问题的吧

## 我就先按照各种教程上这样写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button type="submit" onclick="debounce(()=>{console.log('123123')},1000)"></button>
  <script>
    function debounce(fn, wait) {
      var timeout = null;
      return function () {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
      }
    }
  </script>
</body>
</html>

发现并不能实现我想要的功能

于是我就开始研究此类问题

我发现

当你点击时，每一次都会执行这个函数，并且每一次返回的函数也是新的，并没有达到闭包要求

于是我改造了代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button type="submit" onclick="throttles()">触发</button>
  <script>
    function throttle(fn, delay) {
      var times = null
      let that = this
      return function (...arre) {
        if (times) {
          clearTimeout(times)
        }
        times = setTimeout(fn, delay);
      }
    }
    let throttles = throttle(() => { console.log("12121") }, 1000)
  </script>
</body>
</html>

这样就能完美的实现这个功能了

讲讲这个原理可以嘛？

没问题

当页面加载时会立即执行 throttles函数因为这个是立即执行函数执行完了之后
此刻onclick 就等于返回的函数所以每一次点击都相当于在执行内层函数而内层函数又使用了外层函数的变量，所以外层函数的作用域又不会消失，就形成了闭包函数，当在1秒内调用这个函数时定时函数还未从宏任务中执行完毕，所以上一个变量值还在就会从宏任务中清除这个任务，并压入新的任务

这样就实现了防抖的作用

说我骗人，那就上图

这下清晰了吧，节流只需要把清除定时器的去掉就行，

new 前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
大部分人都被误导的js中防抖与节流的写法

# 先说一下我是如何发现问题的吧 ## 我就先按照各种教程上这样写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ...
复制链接

扫一扫