JS中setTimeout的奇妙用法前端函数节流_

1、JS中setTimeout的奇妙用法前端函数节流_ 这篇文章主要介绍了JS中setTimeout的奇妙用法前端函数节流 的相关资料,需要的伴侣可以参考下 什么是函数节流？ 函数节流简洁的来说就是不想让该函数在很短的时间内连续被调用，比如我们最常见的是窗口缩放的时候，常常会执行一些其他的操作函数，比如发一个ajax恳求等等事情，那么这时候窗口缩放的时候，有可能连续发多个恳求，这并不是我们想要的，或者是说我们常见的鼠标移入移出tab切换效果，有时候连续且移动的很快的时候，会有闪耀的效果，这时候我们就可以用法函数节流来操作。大家都知道，DOM的操作会很消耗或影响性能的，假如是说在窗口缩放的时候，为元

2、素绑定大量的dom操作的话，会引发大量的连续计算，比如在IE下，过多的DOM操作会影响扫瞄器性能，甚至严峻的状况下，会引起扫瞄器崩溃的发生。这个时候我们就可以用法函数节流来优化代码了 函数节流的基本原理： 用法一个定时器，先延时该函数的执行，比如用法setTomeout()这个函数延迟一段时间后执行函数，假如在该时间段内还触发了其他大事，我们可以用法清除方法 clearTimeout()来清除该定时器，再setTimeout()一个新的定时器延迟一会儿执行。 最近在某团队忙于一个项目，有这么一个页面，采纳传统模式开发（吐槽它为什么不用React），它的DOM操作比较多，然后性能是比较差的，尤其

3、当你缩放窗口时，可怕的事情发生了，消失了卡顿，甚至扫瞄器瘫痪。为什么呢？ 由于该页面的DOM操作特别多，故窗口缩放每一帧时都会触发函数的执行，连续的重新DOM操作，这样对扫瞄器的开销是特别大的。既然在窗口缩放时，会让扫瞄器重新计算DOM，那么我们为什么不行以让DOM的计算延时呢，让窗口停止缩放后才重新计，这样不就节约了扫瞄器的开销，达到优化的效果了吗？ 学问预备 1. setTimeout(code,millisec) 当然就是本文的主角了。 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 code必需。要调用的函数后要执行的 JavaScript 代码串。 mill

4、isec必需。在执行代码前需等待的毫秒数。 提示：setTimeout() 只执行 code 一次。假如要多次调用，请用法 setInterval() 或者让 code 自身再次调用 setTimeout()。 广泛应用于定时器，轮播图，动画效果，自动滚动等等。 2. clearTimeout(id_of_setTimeout) 参数 id_of_settimeout由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 3. fun.apply(thisArg, argsArray) apply() 方法在指定 this 值和参数（参数以数组或类数组对象的形式存在）

5、的状况下调用某个函数 该函数的语法与call()方法几乎相同，唯一的区分在于，call()方法接受的是一个参数列表，而apply()接受的是一个包含多个参数数组的（或类数组对象）。 参数 thisArg 在 fun 函数运行时指定的 this 值。需要留意的是，指定的 this 值并不肯定是该函数执行时真正的 this 值，假如这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（扫瞄器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。 argsArray 一个数组或者类数组对象，其中的数组元素将作

6、为单独的参数传给 fun 函数。假如该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开头可以用法类数组对象。 在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。 用法 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。 4. fun.call(thisArg, arg1, arg2, .) 该 方法在用法一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 参数 thisArg 在fun函数运行时指定的this值。需要留意

7、的是，指定的this值并不肯定是该函数执行时真正的this值，假如这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(扫瞄器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。 arg1, arg2, . 指定的参数列表。 当调用一个函数时，可以赋值一个不同的 this 对象。this 引用当前对象，即 call 方法的第一个参数。通过 call 方法，你可以在一个对象上借用另一个对象上的方法，比如Ototype.toString.call()，就是一个Array对象借用了Objec

8、t对象上的方法。 作用： 用法call方法调用父构造函数 用法call方法调用匿名函数 用法call方法调用匿名函数并且指定上下文的this 这里插个题外话： apply 与 call() 特别相像，不同之处在于供应参数的方式。apply 用法参数数组而不是一组参数列表。apply 可以用法数组字面量（array literal），如 fun.apply(this, eat, bananas)，或数组对象， 如 fun.apply(this, new Array(eat, bananas)。你也可以用法 arguments 对象作为 argsArray 参数。 arguments 是一个函数的

9、局部变量。 它可以被用作被调用对象的全部未指定的参数。 这样，你在用法apply函数的时候就不需要知道被调用对象的全部参数。 你可以用法arguments来把全部的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。 从 ECMAScript 第5版开头，可以用法任何种类的类数组对象，就是说只要有一个 length 属性和0.length) 范围的整数属性。例如现在可以用法 NodeList 或一个自己定义的类似 length: 2, 0: eat, 1: bananas 形式的对象。 call, apply方法区分是,从其次个参数起, call方法参数将依次传递给借用的方法作参数,

10、而apply 挺直将这些参数放到一个数组中再传递, 最终借用方法的参数列表是一样的. 应用场景:当参数明确时可用call, 当参数不明确时可用apply给合arguments 现在先给出一个例子 总所皆知，onscolll，onresize等是特别耗性能，窗口缩放时打印数字。 var count = ; window.onresize = function () count+; console.log(count); 在chrome扫瞄器中伸缩扫瞄器窗口大小，打印如下 这明显不是我们想要的，那假如我们换成ajax恳求的话，那么就会缩放一次窗口会连续触发多次ajax恳求，下面我们试着用法函数节流

11、的操作试试一下；当然加个settimeout()的定时器就好了， 第一种封装方法 var count = ; function oCount() count+; console.log(count); window.onresize = function () delayFun(oCount) ; function delayFun(method, thisArg) clearTimeout(ps); ps = setTimeout(function () method.call(thisArg) , ) 其次种封装方法 构造一个闭包，用法闭包的方式形成

12、一个私有的作用域来存放定时器timer， timer是通过传参数的形式引入的。 var count = ; function oCount() count+; console.log(count); var funs= delayFun(oCount,); window.onresize = function () funs() ; function delayFun(func, wait) var timer = null; return function () var context = this, args = arguments; clearTimeout(timer); timer

13、= setTimeout(function () func.apply(context, args); , wait) ; 对其次种方法优化一下，性能会更好 这里返回一个函数，假如它被不间断地调用，它将不会得到执行。该函数在停止调用 N 毫秒后，再次调用它才会得到执行。假如有传递 immediate 参数，会马上将函数支配到执行队列中，而不会延迟。 function delayFun (func, wait, immediate) var timeout; return function() var context = this, args = arguments; var later = f

14、unction() timeout = null; if (!immediate) func.apply(context, args); ; var callNow = immediate !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); ; ; / 用法 var myEfficientFn = delayFun (function() / 全部繁重的操作 , ); window.addEventListener(resize, myEfficientFn); 函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的大事安排一个回调函数时，该函数显得尤为重要。 setTimeout这么厉害，那么我们是可以在项目中大量用法吗？ 我个人是不建议的，在我们业务中，基本上是禁止在业务规律中用法setTimeout的，由于我所看到的许多用法方式都是一些问题好解决，setTimeout作为一个hack的方式