# 闭包由于节流和防抖函数的实现都用到了闭包，所以在了解节流和防抖之前先简单介绍下什么是闭包。 ```js function Add() { var x = 1; return function () { x++; console.log(x); } } var result = Add(); //第一次执行A函数 result(); //2 result(); //3 ``` 上述代码：result指向函数Add返回的函数，运行完Add()后，Add的执行环境被释放，但由于函数Add里返回的函数中有对变量x的引用，因此释放时不会释放掉x，每次调用result()时，都保持对x的引用，因此x一直再增加。 # 防抖 ## 定义 - 只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；我们用一副图来理解一下它的过程； - 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； - 当事件密集触发时，函数的触发会被频繁的推迟； - 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； ![debounce.png](https://img.cdn.zhengbeining.com/1596914769613debounce.png) 防抖函数防抖的应用场景很多： - 输入框中频繁的输入内容，搜索或者提交信息； - 频繁的点击按钮，触发某个事件； - 监听浏览器滚动事件，完成某些特定操作； - 用户缩放浏览器的resize事件；总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；在规定时间内，只让最后一次生效，前面的不生效。 ## 最初实现 ```html ``` 上述代码是最简单的防抖函数，但是会出现如下问题： 1、对于一个页面上需要多个防抖函数的时候，需要写很多重复代码。不能复用 2、全局变量污染作用域因此有以下升级版 ## 实现一：优化全局变量污染 ```html ``` ## 实现二：优化可定义要执行的函数以及防抖时间 ```html ``` ## 实现三：优化this和arguments ```html ``` ## 实现四：优化头部立即执行 ```html ``` ## 实现五：优化中途取消 ```html ``` ## 实现六：优化返回值(callback版) ```html ``` ## 实现七：优化返回值(Promise版) ```html ``` # 防抖无注释版 ```html ``` # 节流 ## 定义 ## 最初实现 ```html ``` ## 实现一：优化最后一次执行 ```html ``` ## 实现二：优化返回值(callback版) ```html ``` ## 实现三：优化返回值(Promise版) ```html ``` ## 节流无注释版 ```html ```

Vue Blog

Vue ^Blog