JavaScript高级程序设计高级技巧

mousemove事宜在我的电脑的Chrome上1s大年夜概触发60次：

JS高等法度榜样设计高等技能

如不雅你须要监听resize事宜做DOM调剂的话，这个调剂比较费时，1s要调剂40次，如许可能会响应不过来，并且不须要调剂得这么频繁，所以要撙节。

怎么实现一个撙节呢，书里是这么实现的：

function throttle(method, context) { 
    clearTimeout(method.tId); 
    method.tId = setTimeout(function() { 
        method.call(context); 
    }, 100); 
}

每次履行都要setTimeout一下，如不雅触发得很快就把上一次的setTimeout清掉落从新setTimeout，如许就不会履行很快了。然则如许有个问题，就是这个回调函数可能永远不会履行，因为它一向在触发，一向在清掉落tId，如许就有点难堪，膳绫擎代码的本意应当是100ms内最多触发一次，而实际情况是可能永远不会履行。

function sleep(millionSeconds) { 
    return new Promise(resolve =>  
                             setTimeout(resolve, millionSeconds)); 
} 
sleep(2000).then(() => console.log("sleep recover"));

把膳绫擎的代码稍微改革一下：

click事宜的履行回调琅绫擎this不是指向了DrawTool的实例了，所以琅绫擎的this.points将会返回undefined。第一种解决办法是应用闭包，先把this缓存一下，变成that：

这个实现就是精确的，每100ms最多履行一次回调，道理是在setTimeout琅绫擎把tId给置成0，如许能让下一次的触发履行。实际实验一下：

JS高等法度榜样设计高等技能

大年夜概每100ms就履行一次，如许就达到我们的目标。

然则如许有一个小问题，就是每次履行都是要延迟100ms，有时刻用户可能就是最大年夜化了窗口，只触发了一次resize事宜，然则此次照样灯揭捉?迟100ms才能履行，假设你的时光是500ms，那就灯揭捉?迟半秒，是以这个实现不太幻想。

须要优化，如下代码所示：

function throttle(method, context) { 
    // 如不雅是第一次触发，急速履行 
    if (typeof method.tId === "undefined") { 
        method.call(context); 
    } 
    if (method.tId) { 
        return; 
    } 
    method.tId = setTimeout(function() { 
        method.call(context); 
        method.tId = 0; 
    }, 100); 
}

先断定是否为第一次触发，如不雅是的话急速履行。如许就解决了膳绫擎提到的问题，然则这个实现照样有问题，因为它只是全局的第一次，用户最大年夜化之后，隔了一会又撤消最大年夜化了就又有延迟了，并且第一次触发会执行两次。那怎么办呢?

笔者想到了一个办法：

function throttle(method, context) { 
    if (!method.tId) { 
        method.call(context); 	
			 8/9   首页 上一页 6 7 8 9 下一页 尾页	
			

　　推荐阅读
　　JS高级程序设计高级技巧
            
            本篇是看的《JS高等法度榜样设计》第23章《高等技能》做的读书分享。本篇按照书里的思路根据本身的懂得和经验，进行扩大延长，同时指出版里的一些问题。将会评论辩论安然的类型检测、惰性>>>详细阅读


本文标题：JavaScript高级程序设计高级技巧
地址：http://www.17bianji.com/lsqh/37134.html
 1/2    1