浏览器中的一些计算和处理比其他的要昂贵得多。例如，DOM操作比非DOM交互需要更多的内存和CPU时间。持续尝试执行太多与DOM相关的操作可能会导致浏览器挂起，有时甚至崩溃。特别是在IE中使用onresize事件处理程序时，很容易发生这种情况。当调整浏览器的大小时，这个事件会连续触发。如果在onresize事件处理程序中尝试DOM操作，其频繁更改可能会导致浏览器崩溃。

函数节流背后的基本思想是，有些代码不能不间断地重复执行。第一次调用函数，创建一个计时器，并在指定的时间间隔后运行代码。当第二次调用该函数时，它将清除前一个计时器，并设置另一个计时器。如果之前的定时器已经执行，这个操作就没有意义了。但是，如果之前的计时器没有被执行，它实际上会被新计时器替换。目的是仅在执行该函数的请求停止一段时间后才执行该函数。

函数throttle(方法，上下文){ clearTimeout(方法. TiD)；method . TiD=SetTiMeout(function(){ method . call(context))；} , 100);}应用程序示例：假设有一个div/元素需要保持其高度始终等于其宽度，可以按如下方式进行编码。

函数resizeDiv(){ var div=document . getelementbyid(' my div ')；div . style . height=div . offsetwidth ' px '；} window . onresize=function(){ throttle(ResizeDiv)；}在这里，调整大小的函数被放入一个名为resizeDiv的单独函数中，然后onresize事件处理程序调用throttle()并将其传递给resizeDiv函数，而不是直接调用resizeDiv()。大多数时候，用户感觉不到变化，尽管浏览器的计算节省可能非常大。

以下是其他网友的补充

今天主要写日常工作中需要用到的功能节流。有些朋友可能不知道功能节流。事实上，在我们的工作中，很多场景都需要我们去节流js。最常见的是屏幕大小调整和触摸移动或滚动事件。大家不知道有没有看过我之前写的文章！Jquery判断滚动条的上下滚动和touchmove的滑动方向。当你使用这些例子时，你会发现页面不断地触发touchmove或Scroll，因为它与页面的重绘无关，所以我这里不使用javascript函数来节流。但是，当我们使用window.onresize时，resize事件会不断被触发！这将与页面的重绘有关。因此，在调整窗口大小时，我们建议您使用函数节流方法！

javascript函数节流介绍。如果你觉得被我上面的一大堆话压垮了，没关系。我举一个简单的函数节流的例子。例如，当我们使用

$(窗口)。resize(function(){ console . log(' Hao rooms window resize ')；})您会发现：

这里会输出很多次。我们只要把窗户缩小，它就会不断触发！

这样一来，当div很多的时候，页面会不断重绘，如果遇到版本较低的IE，很有可能浏览器会崩溃！为了避免这种情况，我们可以使用函数节流。基本思想是，当我们第一次调用函数时，我们创建一个计时器，并在指定的时间间隔后运行代码。当我们第二次调用它时，我们会知道以前的计时器并重置它。如果前一个定时器已经被执行，那么这个操作是无意的。如果定时器没有被执行，它将被替换成一个新的定时器。目的是在函数停止执行一段时间后执行它。

以对象的形式，它可以写成如下形式：

var haoomstest={ timeoutid : null，perform processing : function(){ console。日志(“调整大小”)；}，进程：函数(){ cleartime out(这。timeoutid)；变量=这个；这个。timeoutid=setTimeout(function(){ that。perform processing()；},500) } }这样之后，我们再用：

$(窗口)。resize(function(){ haoomstest。process()；})

这样就会减少请求，减少数字正射影像图重绘，达到节流的目的！

函数节流其他方式除了我们运用对象的方式，网上及资料中也介绍了关于函数节流的其他方法和方式，我下面简单介绍几种！

函数方式一

函数节气门(方法，上下文){ clearTimeout(方法。TiD)；方法。TiD=SetTiMeout(function(){ method }。调用(上下文))；},100);}我们如下使用

函数ResizeDiV(){控制台。日志('豪客房')} $(窗口).调整大小(函数(){ throttle(resizeDIv) })和上面对象实现了同样的效果！

函数方式二

网上还有一种比较流行的节流方式，我在这里写一下！

函数节气门(方法，延迟){ var timer=null return function(){ var context=this，args=argsclearTimeout(计时器);timer=setTimeout(function(){ method。应用(上下文，参数)；},延迟);} }然后可以这么写：

函数resizeDIv(){控制台。日志('豪客房')窗口。onresize=throttle(resizeDIv，500)；新需求

我们在做模糊搜索智能联想提示的时候，会在投入上面绑定按键事件。但是我又不想触发的那么频繁，用上面的方式就会有问题。因此，在上面的函数基础上稍加改动，如下：

函数节流（方法、延迟、持续时间){ var timer=null，begin=new Date()；返回函数(){ var context=this，args=args，current=new Date()；clearTimeout(计时器);if(current-begin=duration){ method。应用(上下文，参数)；开始=当前；} else { timer=setTimeout(function(){ method }。应用(上下文，参数))；},延迟);} }}这样触发就不会有之前那么频繁了！