谈谈js中的函数节流

sanyang 发布于2019-08-20 14:31 / 1215人阅读

摘要：为了解决这些问题，就可以使用定时器对函数进行节流。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。

函数节流的目的

从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其高频率的更改可能会让浏览器崩溃。又例如，我们常见的一个搜索的功能，我们一般是绑定keyup事件，每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。为了解决这些问题，就可以使用定时器对函数进行节流。

函数节流的原理

某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

函数节流的基本模式

var processor = {
   timeoutId: null,
     //实际进行处理的方法
   performProcessing: function(){
     //实际执行的代码
   },
  //初始处理调用的方法
  process: function(){
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function(){
      that.performProcessing();
    }, 100);
  }
};
//尝试开始执行
processor.process();

好吧，看得确实有点迷糊。下面通过一个例子来详细说明，并且在这个基础模式之上做一个优化处理。

例子场景：实现常见的搜索功能

①没有使用函数节流的情况下，为input绑定keyup事件处理函数，在控制台输出我输入的内容。

测试主要代码：

HTMl：
    
JS：

结果如图：

可以看出，这种情况下，每按下一个键盘键，就输出了一次。短短的一些内容，输出了14次，如果每一次都是一次ajax查询请求的话就发了14个请求了。在性能上的消耗可想而知。

②使用基本的函数节流模式的情况。

测试主要代码：

HTML： JS：

复制代码
结果如图：

可以看出，这种情况下，输入了好一些内容，只输出了一次，因为测试的时候设置了两次输入间隔是500ms，实际应用可根据情况设置。显然，这在性能上大大滴得到了优化。不过，这样的话，有一个新问题，如下图：

好吧，或许看不出端倪。其实问题就是，假如我不断地输入，输入了很多内容，但是我每两次之间的输入间隔都小于自己设置的delay值，那么，这个queryData搜索函数就一直得不到调用。实际上，我们更希望的是，当达到某个时间值时，一定要执行一次这个搜索函数。所以，就有了函数节流的改进模式。

③函数节流增强版

测试的主要代码：

复制代码
HTML：

JS：

复制代码
测试结果如图：

显然，连续的输入，到一定时间间隔之后，queryData函数必然会被调用，但是又不是频繁的调用。这既达到了节流的目的，又不会影响用户体验。

④进一步的优化

进一步的话，就是可以在调用throttle函数之前，先对输入的内容进行判断，若其值为空、值不变都不用再调用。这里就不详说了。

更多学习链接

详细改进实例

节流与去抖

http://www.cnblogs.com/LuckyW...

云服务器 GPU云服务器 js函数节流函数节流 javascript中的函数 php中的变量函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81703.html

7分钟理解JS的节流、防抖及使用场景

摘要：前言据说阿里有一道面试题就是谈谈函数节流和函数防抖。糟了，这可触碰到我的知识盲区了，好像听也没听过这个东西，痛定思痛，赶紧学习学习。概念和例子函数防抖在事件被触发秒后再执行回调，如果在这秒内又被触发，则重新计时。前言据说阿里有一道面试题就是谈谈函数节流和函数防抖。糟了，这可触碰到我的知识盲区了，好像听也没听过这2个东西，痛定思痛，赶紧学习学习。here we go！ showImg...

meteor199 2019-08-23 11:42 评论0 收藏0
谈谈JS中的高级函数

摘要：作用域安全的构造函数会首先确认对象是正确类型的实例，然后再进行更改，如下这样就避免了在全局对象上意外更改或设置属性。在多人协作的项目中，为了避免他们误改了全局对象，也应使用作用域安全的构造函数。博客原文地址：Claiyre的个人博客如需转载，请在文章开头注明原文地址在JavaScript中，函数的功能十分强大。它们是第一类对象，也可以作为另一个对象的方法，还可以作为参数传入另一个函...

raoyi 2019-08-21 11:55 评论0 收藏0
H5学习

摘要：为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。对ES6Generator函数的理解 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。 JavaScript 设计模式 ② 巧用工厂模式和创建者模式我为什么把他们两个放在一起讲？我觉得这两个设计模式有相似之处，有时候会一个设计模式不能满...

aristark 2019-08-22 11:21 评论0 收藏0