关于setTimeout的妙用前端函数节流

      最近在某团队忙于一个项目，有这么一个页面，采用传统模式开发（吐槽它为什么不用React），它的DOM操作比较多，然后性能是比较差的，尤其当你缩放窗口时，可怕的事情发生了，出现了卡顿，甚至浏览器瘫痪。为什么呢？

      由于该页面的DOM操作非常多，故窗口缩放每一帧时都会触发函数的执行，连续的重新DOM操作，这样对浏览器的开销是非常大的。既然在窗口缩放时，会让浏览器重新计算DOM，那么我们为什么不可以让DOM的计算延时呢，让窗口停止缩放后才重新计，这样不就节省了浏览器的开销，达到优化的效果了吗？

 

知识准备

1. setTimeout(code,millisec) 当然就是本文的主角了。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

code必需。要调用的函数后要执行的 JavaScript 代码串。

millisec必需。在执行代码前需等待的毫秒数。

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

广泛应用于定时器，轮播图，动画效果，自动滚动等等。

 

2. clearTimeout(id_of_setTimeout)

参数 id_of_settimeout由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

 

3. fun.apply(thisArg[, argsArray])

apply() 方法在指定 this 值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数

该函数的语法与call()方法几乎相同，唯一的区别在于，call()方法接受的是一个参数列表，而apply()接受的是一个包含多个参数数组的（或类数组对象）。

参数

thisArg

在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。

argsArray

一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。 使用 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。

 

4. fun.call(thisArg[, arg1[, arg2[, ...]]])

该 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

 

参数

thisArg

在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...

指定的参数列表。

 

当调用一个函数时，可以赋值一个不同的 this 对象。this 引用当前对象，即 call 方法的第一个参数。通过 call 方法，你可以在一个对象上借用另一个对象上的方法，比如Object.prototype.toString.call([])，就是一个Array对象借用了Object对象上的方法。

 

作用：

使用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 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。

 

从 ECMAScript 第5版开始，可以使用任何种类的类数组对象，就是说只要有一个 length 属性和[0...length) 范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似 {'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

 

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply 直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

应用场景:当参数明确时可用call, 当参数不明确时可用apply给合arguments

 

现在先给出一个例子

总所皆知，onscolll，onresize等是非常耗性能，窗口缩放时打印数字。

var count = 0;
window.onresize = function () {
    count++;
    console.log(count);
}

在chrome浏览器中伸缩浏览器窗口大小，打印如下

这显然不是我们想要的，那如果我们换成ajax请求的话，那么就会缩放一次窗口会连续触发多次ajax请求，下面我们试着使用函数节流的操作试试一下；当然加个settimeout()的定时器就好了，

 

第一种封装方法

var count = 0;
function oCount() {
    count++;
    console.log(count);
}
window.onresize = function () {
    delayFun(oCount)
};

function delayFun(method, thisArg) {
    clearTimeout(method.props);
    method.props = setTimeout(function () {
        method.call(thisArg)
    }, 200)
}

 

第二种封装方法

构造一个闭包，使用闭包的方式形成一个私有的作用域来存放定时器timer， timer是通过传参数的形式引入的。

var count = 0;
function oCount() {
    count++;
    console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
   funs()
};

function delayFun(func, wait) {
    var timer = null;
    return function () {
        var context = this,
                args = arguments;
        clearTimeout(timer);
        timer = 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 = function() {
            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() {
        // 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时，该函数显得尤为重要。

 

setTimeout这么厉害，那么我们是可以在项目中大量使用吗？

我个人是不建议的，在我们业务中，基本上是禁止在业务逻辑中使用setTimeout的，因为我所看到的很多使用方式都是一些问题不好解决，setTimeout作为一个hack的方式。

例如，当一个实例还没有初始化的前，我们就使用这个实例，错误的解决办法是使用实例时加个setTimeout，确保实例先初始化。

为什么错误？这里其实就是使用hack的手段

第一是埋下了坑，打乱模块的生命周期

第二是出现问题时，setTimeout其实是很难调试的。

我认为正确的使用方式是，看看生命周期（可参考《关于软件的生命周期 》），把实例化提到使用前执行。

 

参考：

7 个基本的 JS 函数http://web.jobbole.com/82540/

《关于软件的生命周期 》

 

打广告：要找实习了，有没有老板要收留我。