Throttle 无视一定时间内所有的调用,适合在发生频度比较高的,处理比较重的时候使用。 复制代码 代码如下: var throttle = function (func, threshold, alt) { var last = Date.now(); threshold = threshold || 100; return function () { var now = Date.now(); if (now - last < threshold) { if (alt) { alt.apply(this, arguments); } return; } last = now; func.apply(this, arguments); }; }; Debounce 一定间隔内没有调用时,才开始执行被调用方法。 复制代码 代码如下: var debounce = function (func, threshold, execASAP) { var timeout = null; threshold = threshold || 100; return function () { var self = this; var args = arguments; var delayed = function () { if (!execASAP) { func.apply(self, args); } timeout = null; }; if (timeout) { clearTimeout(timeout); } else if (execASAP) { func.apply(self, args); } timeout = setTimeout(delayed, threshold); }; }; Test 复制代码 代码如下: var test = function (wrapper, threshold) { var log = function () { console.log(Date.now() - start); }; var wrapperedFunc = wrapper(log, threshold); var start = Date.now(); var arr = []; for (var i = 0; i < 10; i++) { arr.push(wrapperedFunc); } while(i > 0) { var random = Math.random() * 1000; console.log('index: ' + i); console.log('random: ' + random); setTimeout(arr[--i], random); } }; test(debounce, 1000); test(throttle, 1000);
推荐阅读
jquery在Chrome下获取图片的长宽问题解决
遇到个需要获得图片的长宽的问题。在IE、FireFox下均正常,就TMD在Chrome中不行,网上非有人说可以,然后还归结为是不是Chrome版本问题。 终于的终于,找到了答案。 在大多数情况下,把js代码放到图片标签的后面: >>>详细阅读
本文标题:Javascript Throttle & Debounce应用介绍
地址:http://www.17bianji.com/kaifa2/JS/22193.html
1/2 1