在前端開發(fā)中有一部分的用戶行為會頻繁的觸發(fā)事件執(zhí)行，而對于DOM操作、資源加載等耗費性能的處理，很可能導(dǎo)致界面卡頓，甚至瀏覽器的崩潰。函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)就是為了解決類似需求應(yīng)運而生的。
函數(shù)節(jié)流(throttle)
函數(shù)節(jié)流就是預(yù)定一個函數(shù)只有在大于等于執(zhí)行周期時才執(zhí)行，周期內(nèi)調(diào)用不執(zhí)行。好像水滴攢到一定重量才會落下一樣。
場景：
實現(xiàn)：
function throttle(method, delay){ var last = 0; return function (){ var now = +new Date(); if(now - last > delay){ method.apply(this,arguments); last = now; } }}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);underscore實現(xiàn)：
_.throttle = function(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); if (!previous && options.leading === false) previous = now; //計算剩余時間 var remaining = wait - (now - previous); context = this; args = arguments; //剩余時間小于等于0或者剩余時間大于等待時間(本地時間變動出現(xiàn)) if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; };}; 函數(shù)防抖(debounce)
函數(shù)防抖就是在函數(shù)需要頻繁觸發(fā)情況時，只有足夠空閑的時間，才執(zhí)行一次。好像公交司機會等人都上車后才出站一樣。
場景：
實現(xiàn)：
function debounce(method, delay){ var timer = null; return function(){ var context = this,args = arguments; clearTimeout(timer); timer = setTimeout(function(){ method.apply(context, args); },delay); }}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);underscore實現(xiàn)：
_.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { var last = _.now() - timestamp; if (last < wait && last >= 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = _.now(); var callNow = immediate && !timeout; if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; };}; 函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)都是通過延時邏輯操作來提升性能的方法，在前端優(yōu)化中是常見且重要的解決方式。可以從概念和實際應(yīng)用中理解兩者的區(qū)別，在需要的時候選擇合適的方法處理。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
