点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

什么是JavaScript函数节流？相信有不少同学脑海里都没概念，其实很简单......

如果你没听说过"函数节流"，那下面这种需求你一定遇到过：就是当浏览器窗口改变的时候需要去改变页面中一些元素的大小，相信看到这个需求的时候，大家都会立马想到用window的resize事件。没错，下面我们一步一步来说。

一、实例展示：

为了实现上面那个功能，下面是我写的一段JS代码（为了说明问题，用的是测试代码），是这样的：

这段代码很容易理解，因为是测试代码，我写的比较简单，于是乎，我高高兴兴的开始测试代码，效果是这样的：

哎呀！如上图所示，我稍微拖拽一下浏览器窗口，resizeWin函数就执行了几十次，这完全不是我想要的效果呀，假如，resizeWin函数里有一个ajax请求，简单的一个拖拽就发起了几十次请求，严重时，将拖慢整个网页，这必属于BUG，这肯定是不行的。于是乎，我就开始寻找解决办法，这个办法就是函数节流。

二、函数节流：

上面那个问题，其实我只是希望在拖拽结束时触发一次就行，拖拽过程中不需要触发，所以我就将代码更改了一下，更改后是这样的：

如上图代码可知，节流的原理就是，利用定时器，让函数执行延迟100毫秒，在100毫秒内如果有函数又被调用则删除上一次调用，这次调用100毫秒后执行，如此往复。在来看一下更改后的效果：

好了，问题解决了，函数节流就是这么一回事，该总结了。

三、写在最后的总结：

这篇文章很短，主要是给大家讲讲函数节流，从上面来看，函数节流的原理挺简单的：当触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。