用Lodash節流是行不通的

Question

我想使用Lodash的throttle來減少滾動時的函數調用。 我的代碼如下：

window.addEventListener('scroll', _.throttle(() => { console.log('bam'); }), 1000);

不幸的是，這不起作用 - 我一直在接受bam -ed，而不是每一個人都受到攻擊。

我能做什么？

CodePen： http ：//codepen.io/tomekbuszewski/pen/oxeOXy？editors = 1111

Answer 1

_.throttle函數應該只生成一次，而不是每次事件觸發時生成

  var callback = _.throttle(() => { console.log('bam')}, 10000); window.addEventListener('scroll', callback); 

 div { height : 100px } div > div { height : 1000px } 

 <script src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.min.js"></script> <div> <div></div> </div> 

console.log("bam")每10秒調用一次

Answer 2

您的代碼中存在錯誤

window.addEventListener('scroll', _.throttle(() => { console.log('bam'); }, 1000));

Answer 3

var f = function() {
    console.log("bam");
}

window.addEventListener('scroll', _.throttle(f, 1000));

Answer 4

簡單，高效，低開銷

你不需要 lodash一個體面的油門功能。 節流功能的目的是減少瀏覽器資源，而不是應用你正在使用的更多開銷。 此外，我對油門功能的不同用途需要它們有許多不同的情況。 這是我的“好”油門功能需要的東西列表。

• 最小的開銷。
• 如果自上次調用以來已超過間隔 MS，則立即進行函數調用。
• 避免執行另一個間隔 MS的功能。
• 延遲過多的事件觸發而不是完全丟棄事件。
• 在需要時更新延遲事件，使其不會變得“陳舊”。
• 當受限制的函數延遲時，阻止事件的默認操作。
• 能夠刪除節流事件偵聽器偵聽器。

並且，我相信以下節流功能滿足所有這些。

function throttle(func, alternateFunc, minimumInterval) {
    var executeImmediately = true, freshEvt = null;
    return function(Evt) {
        if (executeImmediately) { // Execute immediatly
            executeImmediately = false;
            setTimeout(function(f){ // handle further calls
                executeImmediately = true;
                if (freshEvt !== null) func( freshEvt );
                freshEvt = null;
            }, minimumInterval);
            return func( Evt );
        } else { // Delayed execute
            freshEvt = Evt;
            if (typeof alternateFunc === "function") alternateFunc( Evt );
        }
    };
}

• 注意： removeEventListener只能刪除傳遞給addEventListener的確切函數。 如果您將包裝函數發送到addEventListener ，則removeEventListener需要此包裝函數，而不是原始函數。 因此，以下不起作用。

function clickFunctor(){ /*...*/ }

// This code throttles clickFunctor to 500ms
var throttledFunctor = throttle(clickFunctor, null, 500); // WORKS
addEventListener("click", throttledFunctor, false); // WORKS

// ONLY this removeEventListener works
removeEventListener("click", throttledFunctor, false); // WORKS

// For example, this removeEventListener does not work
removeEventListener("click", throttle(clickFunctor, null, 500), false); // FAILS
// This removeEventListener also does not work
removeEventListener("click", clickFunctor, false); // FAILS

如果你需要在addEventListener和removeEventListener周圍進行包裝以使它們正常工作，那么你可以使用下面的函數。

var tfCache = []; // throttled functions cache
function listen(source, eventName, func, _opts){
    var i = 0, Len = tfCache.length, cF = null, options = _opts || {};
    a: {
        for (; i < Len; i += 4)
            if (tfCache[i] === func &&
              tfCache[i+1] === (options.ALTERNATE||null) &&
              tfCache[i+2] === (options.INTERVAL||200)
            ) break a;
        cF = throttle(func, options.ALTERNATE||null, options.INTERVAL||200);
        tfCache.push(func, options.ALTERNATE||null, options.INTERVAL||200, cF);
    }
    source.addEventListener(eventName, cF || tfCache[i+3], _opts);
    return cF === null; // return whether it used the cache or not
};
function mute(source, eventName, func, _opts){
    var options = _opts || {};
    for (var i = 0, Len = tfCache.length; i < Len; i += 4)
        if (tfCache[i] === func &&
          tfCache[i+1] === (options.ALTERNATE||null) &&
          tfCache[i+2] === (options.INTERVAL||200)
        ) {
            source.removeEventListener(eventName, tfCache[i+3], options);
            return true;
        }
    return false;
}

listen和mute將適用於任何繼承自EventTarget的實例上的任何事件，例如Element的blur / focus ， window上的“click”， XMLHttpRequest的onprogress， FileReader的onprogress，[等等]。

用法示例：

 var docElement = document.firstElementChild; docElement.style.transition = "background .667s linear"; function whenTheDocumentScrolls() { var scrollTop = docElement.scrollTop || -docElement.getBoundingClientRect().top; var bgColor = "#fff"; if (scrollTop < 1600) bgColor = "#9f9"; else if (scrollTop < 3000) bgColor = "#ff9"; else if (scrollTop < 3600) bgColor = "#f9e"; else if (scrollTop < 5600) bgColor = "#c8f751"; else if (scrollTop < 7200) bgColor = "#68f"; else if (scrollTop < 9200) bgColor = "#3fb"; docElement.style.backgroundColor = bgColor; } whenTheDocumentScrolls(); // Compute the background color right now var scrollListenerOptions = { passive: true, capture: false, // ALTERNATE: function(){ /*...*/ }, INTERVAL: 500 // check at most twice a second }; function throttle(func, alternateFunc, minimumInterval) { var executeImmediately = true, freshEvt = null; return function(Evt) { if (executeImmediately) { // Execute immediatly executeImmediately = false; setTimeout(function(f){ // handle further calls executeImmediately = true; if (freshEvt !== null) func( freshEvt ); freshEvt = null; }, minimumInterval); return func( Evt ); } else { // Delayed execute freshEvt = Evt; if (typeof alternateFunc === "function") alternateFunc( Evt ); } }; } var tfCache = []; // throttled functions cache function listen(source, eventName, func, _opts){ var i = 0, Len = tfCache.length, cF = null, options = _opts || {}; a: { for (; i < Len; i += 4) if (tfCache[i] === func && tfCache[i+1] === (options.ALTERNATE||null) && tfCache[i+2] === (options.INTERVAL||200) ) break a; cF = throttle(func, options.ALTERNATE||null, options.INTERVAL||200); tfCache.push(func, options.ALTERNATE||null, options.INTERVAL||200, cF); } source.addEventListener(eventName, cF || tfCache[i+3], _opts); return cF === null; // return whether it used the cache or not }; function mute(source, eventName, func, _opts){ var options = _opts || {}; for (var i = 0, Len = tfCache.length; i < Len; i += 4) if (tfCache[i] === func && tfCache[i+1] === (options.ALTERNATE||null) && tfCache[i+2] === (options.INTERVAL||200) ) { source.removeEventListener(eventName, tfCache[i+3], _opts); return true; } return false; } listen(window, "scroll", whenTheDocumentScrolls, scrollListenerOptions); listen(document.getElementById("stop-scrolling"), "click", function(){ mute(window, "scroll", whenTheDocumentScrolls, scrollListenerOptions); }, {passive: true}); 

 <button id="stop-scrolling" style="position:fixed;bottom:0;right:0">Remove the scroll listener</button> <div style="font-size:1.4em;line-height:1.8;white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper facilisis leo quis imperdiet. Maecenas vitae malesuada nibh. Donec volutpat nunc in eros pretium vulputate. Curabitur lorem ipsum, tincidunt at hendrerit sed, venenatis vitae nibh. Duis varius felis vitae sem consequat varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer semper eget dolor et egestas. Proin nec ipsum rhoncus, pellentesque quam non, vestibulum augue. Curabitur et diam non est tempor dignissim. Fusce tempor nisl a ligula sagittis, eget condimentum magna iaculis. Vestibulum vulputate mauris eget mi semper, eget mattis orci tincidunt. Phasellus sit amet egestas turpis. Aliquam aliquet facilisis dolor, ultrices mollis risus mollis vulputate. Praesent id ligula at mi faucibus ornare. Fusce at tristique dui. Nullam pellentesque, augue eget tristique egestas, est metus euismod odio, a convallis lacus lectus non massa. Nullam a fringilla turpis. Mauris in ultricies est. Nam faucibus, nunc eu suscipit volutpat, est augue congue velit, fermentum ornare nibh erat ac ex. Sed ut neque auctor, facilisis arcu in, molestie leo. Praesent vestibulum lacinia sapien, ac porta ligula porttitor et. Vestibulum nec ante libero. Sed vel velit elit. Praesent tristique bibendum consectetur. Vestibulum pretium tellus sapien, eu vulputate mi condimentum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum semper elit risus, id fringilla enim gravida non. In in tellus quis nulla commodo volutpat. Sed tristique, magna eu sagittis porttitor, quam neque varius ante, ac mattis elit ex vitae nisl. Fusce sed justo vitae elit tempus porta. Donec nisl justo, bibendum nec dolor vitae, venenatis elementum justo. Nulla egestas quis tellus non vehicula. Proin vel lobortis felis. Quisque tempus eu elit non porta. Cras eleifend nisl nec vehicula tristique. Integer et pellentesque urna. In eu magna turpis. Vivamus vitae diam nec nulla vulputate pharetra eget vel leo. Praesent et tortor sed purus commodo finibus sit amet id ipsum. Pellentesque diam elit, condimentum et varius eu, elementum vitae quam. Cras felis tellus, auctor non consectetur non, pharetra sed purus. In ut condimentum risus, eu ornare augue. Aliquam eu ex augue. Nunc tincidunt, libero a pellentesque dignissim, metus dui posuere mauris, eu iaculis purus dolor non quam. Donec venenatis tellus ut nisi tristique, sed egestas ipsum auctor. Integer gravida mollis nulla porta pretium. Proin vel dolor nisi. Suspendisse ut lacinia turpis. Donec lacinia lorem mollis ante pretium convallis. Aliquam erat volutpat. Donec vel porta libero. Donec eget arcu id risus fringilla finibus. Duis pulvinar hendrerit metus id porta. Maecenas et nulla in enim scelerisque tempus vel ut massa. Ut luctus placerat ipsum, sit amet pharetra nunc faucibus id. Phasellus varius tortor a mi fermentum porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas mollis varius ante, non blandit ex cursus scelerisque. Vivamus sodales, diam at aliquam blandit, diam metus gravida lectus, non auctor augue felis ut justo. Proin in volutpat neque, id tempus arcu. Aenean vestibulum consequat leo, in tincidunt orci semper eu. Integer blandit vehicula consequat. Donec accumsan purus quis sem dapibus aliquet. Etiam hendrerit sem eget tellus facilisis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vel consequat est. Sed quis convallis tellus. Vivamus quis semper odio. Mauris quis interdum ligula. Praesent cursus ante at libero sollicitudin, at varius nunc dapibus. Vivamus augue nisi, cursus in enim ut, eleifend hendrerit neque. Quisque rhoncus nibh a velit volutpat volutpat. Praesent a purus enim. Donec id fringilla nibh. Pellentesque lectus turpis, auctor vel sem a, consequat rutrum odio. Mauris congue erat commodo, consectetur ante at, rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque vel est rutrum pellentesque. Maecenas sem est, dapibus vitae nisi non, tempor tincidunt libero. Aenean ornare auctor tellus et molestie. Phasellus vel efficitur leo. Phasellus quis venenatis lectus. Nam ac neque quis dolor tristique gravida. Fusce sem dolor, suscipit non aliquam sed, cursus faucibus turpis. Integer feugiat, nulla ut vestibulum fringilla, velit dui rhoncus quam, a ullamcorper sapien libero ut quam. Phasellus ornare posuere libero, eu venenatis nunc iaculis nec. Etiam sed malesuada ante. Morbi consequat risus sit amet tellus lobortis convallis ut mollis arcu. Donec suscipit mollis lectus, vitae ullamcorper sem aliquam ac. Aliquam sed erat id eros malesuada aliquam. Nunc semper felis sed ligula ullamcorper congue. Ut nec cursus libero, a posuere ligula. Proin luctus laoreet mi, ac semper lectus convallis nec. Maecenas eu egestas mi. Etiam varius ex eget tincidunt auctor. Curabitur bibendum quam id ligula lacinia, quis molestie lacus vestibulum. Etiam dapibus lacus nulla, quis luctus justo tempus sed. Praesent mi enim, efficitur quis congue vestibulum, molestie non odio. Donec nibh ex, elementum vitae sodales quis, pulvinar vitae tortor. Morbi et egestas velit, eget congue nibh. Vestibulum fringilla mi leo. Curabitur cursus viverra mauris, sed auctor odio tristique eget. Suspendisse a ipsum tellus. Etiam eleifend vel sapien non consectetur. Mauris ac felis mauris. Donec fermentum eros sit amet ex placerat, id faucibus nisl lacinia. Vivamus eget dui vitae nisl commodo feugiat vitae ac ante. Nunc ullamcorper eros id massa sagittis, ac gravida felis semper. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae placerat ligula. Fusce malesuada mi et arcu pellentesque ornare. Fusce cursus, ipsum non gravida scelerisque, libero tortor sagittis elit, ac accumsan justo est sed ligula. Nam condimentum leo est. Vivamus hendrerit finibus metus quis cursus. Quisque consequat ipsum vitae justo volutpat ultricies. Nullam eget nisi quis sapien tempor scelerisque sit amet vel tellus. Vivamus euismod ultrices nisi a iaculis. Nam augue dui, aliquam et leo et, convallis imperdiet velit. Sed vestibulum eget quam eu fringilla. Suspendisse ac nunc ac ligula interdum congue et eget libero. In mollis dui sed mi finibus finibus. Phasellus scelerisque, lectus in vulputate egestas, sem leo bibendum mauris, a tincidunt risus quam eu ante. Nulla placerat nibh et velit volutpat tincidunt. Ut luctus elementum massa, eget finibus tortor tincidunt at. Curabitur quis sagittis velit. Etiam finibus, quam vitae blandit vehicula, massa enim faucibus nisl, a aliquet purus justo tristique tortor. Sed fringilla tincidunt consequat. Mauris a tellus ultricies, tempus tortor nec, auctor est. Nulla feugiat nisl urna, a pulvinar erat consectetur condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in ultrices mi. Donec non sapien varius, tempor quam in, semper dui. Pellentesque aliquam sapien eu quam pellentesque pretium. Cras hendrerit dolor et libero semper, eget vestibulum quam tristique. Aliquam lobortis lacus vel purus mollis maximus. Nam vel imperdiet nunc, sit amet faucibus eros. Donec viverra varius volutpat. Sed quis mollis dolor, et posuere eros. In eu quam orci. In vitae ante sed nisl vulputate ornare. Nullam quis ipsum molestie, laoreet elit quis, commodo tellus. Donec volutpat, velit at ornare fermentum, ipsum lectus convallis nisi, sed pharetra tortor tortor eget nisl. Vestibulum porta condimentum aliquet. Cras malesuada tellus erat, id auctor lorem pulvinar sed. Etiam non arcu suscipit, interdum sem eu, dapibus est. Pellentesque tincidunt sem varius arcu semper lacinia. Suspendisse nunc felis, aliquet vel ullamcorper vitae, malesuada at dui. Vestibulum hendrerit neque sed sodales placerat. Praesent pulvinar massa eu risus facilisis placerat. Quisque tincidunt est sed mauris placerat, id viverra risus vulputate. Aenean in iaculis justo, et suscipit ligula. Aliquam efficitur in arcu vel vehicula. Suspendisse vitae dui magna. In dictum, nibh eget eleifend fermentum, sapien ex pharetra lorem, id dignissim lectus ipsum non nibh. Praesent at dignissim orci. Sed ante nisi, commodo et metus ac, feugiat commodo nisi. Cras ut ligula sed augue dignissim gravida ut non mauris. Nullam laoreet diam at ligula luctus finibus. Nunc porta diam sit amet pharetra lacinia. Donec luctus sodales mauris, eu bibendum nisl tempus at. Donec sed pharetra nisi. Quisque sodales ligula nec eros placerat ultricies. In sit amet scelerisque tellus, quis sollicitudin ligula. Curabitur blandit ligula non odio facilisis, vel euismod ligula tempor. Nunc ligula arcu, mollis et metus eu, ullamcorper volutpat risus. Ut sem dolor, dignissim vitae fermentum malesuada, tincidunt aliquam ex. Sed placerat diam ligula, ac vehicula nunc eleifend vel. Nulla facilisi. Mauris in lectus non tortor lacinia vestibulum ut ut turpis. Fusce gravida massa eget tincidunt malesuada. Integer sagittis quam non augue sodales viverra. Vestibulum luctus lectus sed eros molestie, ac congue leo fermentum. Mauris id urna sagittis, accumsan urna ac, posuere neque. Etiam molestie odio lobortis purus imperdiet venenatis. Ut pretium elementum velit, quis luctus massa sodales eu. Suspendisse varius at velit suscipit maximus. Pellentesque gravida ante a vehicula faucibus. Proin tincidunt scelerisque vestibulum. Pellentesque varius semper metus, dignissim maximus elit hendrerit vel. Donec lobortis, tellus nec dictum pellentesque, nisl nisl ullamcorper erat, sit amet interdum nunc est sit amet lacus. In varius varius turpis vel facilisis. Vivamus ac viverra sem, vel scelerisque felis. Etiam eget nunc in nibh tempor dictum. Pellentesque dapibus auctor ante nec sollicitudin. Integer auctor mi tristique lectus convallis pretium. Cras aliquam, massa tempus molestie viverra, massa orci interdum ex, et dapibus justo massa eu arcu. Sed elementum pulvinar turpis, sed congue lorem tincidunt et. Nam egestas felis orci, facilisis auctor urna sollicitudin ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis non euismod arcu. Aenean rhoncus ipsum ut neque finibus, ut pharetra dolor maximus. Pellentesque quam est, vestibulum non mattis id, luctus ut enim. Nam tempor lacus ut suscipit sagittis. Sed egestas id nisi quis tempus. Aenean non cursus quam, nec dignissim augue. Curabitur in placerat quam, in aliquet dui. Curabitur egestas, arcu nec auctor tempor, nibh lectus sollicitudin ligula, a malesuada mauris eros in orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius consequat dolor in pretium. Sed molestie tempor lectus. Curabitur consequat tristique risus, ac tempor ligula tristique ac. Cras porta blandit pretium. Donec vel enim nunc. Pellentesque quis bibendum dui, ac gravida orci. Donec sollicitudin massa in leo iaculis consequat. Nulla at libero ullamcorper turpis venenatis interdum. Pellentesque gravida ante at nisl dignissim, vel consequat leo bibendum. Curabitur id turpis libero. Phasellus nec sapien magna. Quisque rhoncus sem in vulputate tempus. Nullam gravida eget purus ut imperdiet. Curabitur bibendum dapibus magna id ultricies. Sed vestibulum volutpat ante, sed porttitor ante porta in. Sed vitae eros dui. Sed sit amet nunc odio. In cursus, est vitae fermentum facilisis, sapien felis accumsan erat, eu pretium ligula neque at orci. Cras at lorem sit amet enim finibus hendrerit ac lobortis est. Aenean nec dictum nulla. Vivamus scelerisque porttitor nisi, quis bibendum massa commodo et. Fusce nec dapibus purus, vitae sagittis nisl. Vivamus consectetur orci rutrum orci aliquam viverra. Morbi sodales elit at gravida imperdiet. Pellentesque sit amet felis sit amet orci venenatis gravida. Phasellus iaculis augue vitae laoreet lobortis. Maecenas bibendum ultrices gravida. In eu tincidunt libero, quis tempus velit. Suspendisse placerat nisl magna, eu fringilla nunc luctus malesuada. Vestibulum sit amet orci hendrerit tortor pharetra lobortis ut at lacus. Cras erat metus, pretium sed metus ut, interdum posuere nisi. Nullam dolor sem, facilisis sed ex at, feugiat gravida lacus. Sed pellentesque mauris arcu, sit amet finibus nisi pulvinar non. Praesent metus felis, viverra quis libero in, sagittis vehicula ex. Phasellus a consectetur eros. Sed consectetur interdum sollicitudin. Donec sollicitudin venenatis arcu ultrices vehicula. Maecenas dolor urna, placerat id justo at, laoreet maximus enim. Integer porta odio ut purus interdum, at malesuada nisi tempus. Nullam vel cursus nulla. Mauris vehicula gravida sem. Nulla facilisi. Etiam quis nisi at nibh varius tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus venenatis massa laoreet varius blandit. Etiam gravida elit in pulvinar tincidunt. Donec rutrum neque in consectetur dignissim. Vestibulum nec lorem sed augue pretium fermentum. Morbi mattis libero purus, eget accumsan massa accumsan vel. Nunc ullamcorper massa augue, nec bibendum metus fringilla suscipit. Donec iaculis non nulla eu sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dapibus justo odio, at mollis nulla mollis dignissim. Suspendisse mollis, purus sed accumsan tristique, ex quam accumsan mauris, vitae tincidunt turpis magna in quam. Duis vel iaculis nibh. Praesent imperdiet diam at felis cursus commodo. Vestibulum sodales dapibus lacinia. Cras vitae eros ultricies, posuere purus eget, varius arcu. Nulla sodales mauris imperdiet dui bibendum, eu egestas lacus porttitor. Vivamus urna dolor, fermentum sit amet odio id, pharetra venenatis risus. Nunc id tortor metus. Quisque ultrices laoreet ante, a commodo libero dignissim gravida. Sed bibendum ultricies rutrum. Aliquam ornare lacinia commodo. In dapibus nulla id fringilla convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis laoreet interdum. Proin id nibh purus. Aenean nisi dui, imperdiet id lobortis vel, faucibus aliquam dui. Nulla maximus, nisi vitae egestas ornare, sem leo feugiat augue, ut tristique magna odio ut mauris. Ut finibus massa ut ex luctus, at commodo turpis efficitur. Maecenas vestibulum est ac lobortis vehicula. Curabitur sit amet pellentesque turpis. Integer rhoncus eget urna vel mollis. Morbi quis orci accumsan, fermentum augue in, condimentum lacus. Pellentesque quis augue urna. In facilisis, est sollicitudin feugiat suscipit, dui ipsum ullamcorper mauris, sed ultrices ligula mauris ut urna. Maecenas posuere varius consectetur. Nunc sed egestas metus, eu imperdiet neque. Suspendisse sit amet urna et dui rhoncus vestibulum sit amet facilisis eros. Cras molestie euismod nisl, sit amet vehicula tortor efficitur egestas. Nullam ac facilisis urna. Nunc tempor felis sed ipsum feugiat hendrerit. Vestibulum sed lobortis nisi. Proin laoreet tempus tempor. Ut sed hendrerit ante, sed interdum urna. Aliquam tempus eros vitae dictum vehicula. Vestibulum purus quam, elementum sit amet rutrum in, dapibus nec metus. Quisque in mollis dui. Sed malesuada posuere sem ac gravida.</div> 

不幸的是，Stackoverflow禁用了錯誤判斷錯誤和未得到充分肯定的答案的代碼片段，因此這里有一個jsfiddle鏈接來代替運行代碼。

嘗試向下滾動演示中的頁面，並觀察滾動時背景顏色的變化情況。 嘗試使用光標快速上下移動滾動條，看看是否可以讓它中斷並無法更新顏色。 它不會破壞，因為這是一個堅固的固體節流功能。 找到喜歡的顏色后，單擊“刪除滾動偵聽器”按鈕以停止更改顏色。

雖然通過滾動改變背景顏色有點不切實際（在真實的網站上，它只會分散用戶對內容的注意力），我希望這個演示能夠展示出良好的油門功能在性能和流暢性方面的強大功能。用戶體驗。

與Lodash的比較

觀察以下Lodash實現的限制函數。

/**
 * lodash (Custom Build) <https://lodash.com/>
 * Build: `lodash modularize exports="npm" -o ./`
 * Copyright jQuery Foundation and other contributors <https://jquery.org/>
 * Released under MIT license <https://lodash.com/license>
 * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
 */
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** `Object#toString` result references. */
var symbolTag = '[object Symbol]';
/** Used to match leading and trailing whitespace. */
var reTrim = /^\s+|\s+$/g;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `root`. */
var freeParseInt = parseInt;
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
 * Used to resolve the
//// Continued at https://cdn.jsdelivr.net/npm/lodash.throttle@4.1.1/index.js /////

當然，之所以這么大的原因是因為所有的評論。 因此，讓我們比較縮小的尺寸：

// Lodash implementation: 1805 bytes (+GZip => 872 bytes);
//    19 suspended variables per throttle
throttle=function(){function A(a,b,c){function d(b){var p=g,c=k;g=k=void 0;l=b;return m=a.apply(c,p)}function h(a){var p=a-f;a-=l;return void 0===f||p>=b||0>p||q&&a>=u}function r(){var a=v.Date.now();if(h(a))return n(a);var c=setTimeout;var d=a-l;a=b-(a-f);d=q?B(a,u-d):a;e=c(r,d)}function n(a){e=void 0;if(w&&g)return d(a);g=k=void 0;return m}function x(){var a=v.Date.now(),c=h(a);g=arguments;k=this;f=a;if(c){if(void 0===e)return l=a=f,e=setTimeout(r,b),y?d(a):m;if(q)return e=setTimeout(r,b),d(f)}void 0===
e&&(e=setTimeout(r,b));return m}var g,k,m,e,f,l=0,y=!1,q=!1,w=!0;if("function"!=typeof a)throw new TypeError("Expected a function");b=z(b)||0;if(t(c)){y=!!c.leading;var u=(q="maxWait"in c)?C(z(c.maxWait)||0,b):u;w="trailing"in c?!!c.trailing:w}x.cancel=function(){void 0!==e&&clearTimeout(e);l=0;g=f=k=e=void 0};x.flush=function(){return void 0===e?m:n(v.Date.now())};return x}function t(a){var b=typeof a;return!!a&&("object"==b||"function"==b)}function z(a){if("number"==typeof a)return a;var b=a;if("symbol"==
typeof b||b&&"object"==typeof b&&"[object Symbol]"==D.call(b))return n;t(a)&&(a="function"==typeof a.valueOf?a.valueOf():a,a=t(a)?a+"":a);if("string"!=typeof a)return 0===a?a:+a;a=a.replace(E,"");return(b=F.test(a))||G.test(a)?H(a.slice(2),b?2:8):I.test(a)?n:+a}var n=0/0,E=/^\s+|\s+$/g,I=/^[-+]0x[0-9a-f]+$/i,F=/^0b[01]+$/i,G=/^0o[0-7]+$/i,H=parseInt,J="object"==typeof self&&self&&self.Object===Object&&self,v="object"==typeof global&&global&&global.Object===Object&&global||J||Function("return this")(),
D=Object.prototype.toString,C=Math.max,B=Math.min;return function(a,b,c){var d=!0,h=!0;if("function"!=typeof a)throw new TypeError("Expected a function");t(c)&&(d="leading"in c?!!c.leading:d,h="trailing"in c?!!c.trailing:h);return A(a,b,{leading:d,maxWait:b,trailing:h})}}()

但是，如果我們在Lodash中使用了所有這些功能，刪除了.cancel方法（用mute / listen替換它），使得leading選項不再是一個選項，而是總是如此，並刪除了所有關於類型轉換的大驚小怪的情況。假設你意識到你正在使用哪種類型？ 結果是徹底破壞，更多的性能，以及可用的限制功能，這是我的解決方案。 此外，如果您對限制函數有特殊需求，那么我的解決方案可以通過可選的第二個參數輕松擴展，該參數定義了由於限制而丟棄對主節流函數的調用時要調用的函數。

// My implementation: 170 bytes (+GZip => 143 bytes);
//    5 suspended variables per throttle
function throttle(d,e,f){var c=!0,a=null;return function(b){if(c)return c=!1,setTimeout(function(b){c=!0;null!==a&&d(a);a=null},f),d(b);a=b;"function"===typeof e&&e(b)}};

listen / mute是額外的便利方法，可以跟蹤您的油門參考，以便您不必這樣做。 縮小的Lodash代碼不包括這些額外的便利，那么為什么我的代碼必須與Lodash的便利性進行比較，這是沒有方便的？ 因此，我的上面的代碼片段只代表我沒有listen / mute便捷方法的節流器。

因此，我認為我的實現在功能上與Lodash相當，並且在大小和性能方面遠遠優於Lodash