您好,登錄后才能下訂單哦!
這篇文章主要介紹“JS函數(shù)節(jié)流和函數(shù)防抖實(shí)例介紹”,在日常操作中,相信很多人在JS函數(shù)節(jié)流和函數(shù)防抖實(shí)例介紹問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”JS函數(shù)節(jié)流和函數(shù)防抖實(shí)例介紹”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
在前端開發(fā)中有一部分的用戶行為會(huì)頻繁的觸發(fā)事件執(zhí)行,而對(duì)于DOM操作、資源加載等耗費(fèi)性能的處理,很可能導(dǎo)致界面卡頓,甚至瀏覽器的崩潰。函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)就是為了解決類似需求應(yīng)運(yùn)而生的。
函數(shù)節(jié)流(throttle)
函數(shù)節(jié)流就是預(yù)定一個(gè)函數(shù)只有在大于等于執(zhí)行周期時(shí)才執(zhí)行,周期內(nèi)調(diào)用不執(zhí)行。好像水滴攢到一定重量才會(huì)落下一樣。
場景:
窗口調(diào)整(resize)
頁面滾動(dòng)(scroll)
搶購瘋狂點(diǎn)擊(mousedown)
實(shí)現(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實(shí)現(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; //計(jì)算剩余時(shí)間 var remaining = wait - (now - previous); context = this; args = arguments; //剩余時(shí)間小于等于0或者剩余時(shí)間大于等待時(shí)間(本地時(shí)間變動(dòng)出現(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ā)情況時(shí),只有足夠空閑的時(shí)間,才執(zhí)行一次。好像公交司機(jī)會(huì)等人都上車后才出站一樣。
場景:
實(shí)時(shí)搜索(keyup)
拖拽(mousemove)
實(shí)現(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實(shí)現(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)都是通過延時(shí)邏輯操作來提升性能的方法,在前端優(yōu)化中是常見且重要的解決方式??梢詮母拍詈蛯?shí)際應(yīng)用中理解兩者的區(qū)別,在需要的時(shí)候選擇合適的方法處理。
到此,關(guān)于“JS函數(shù)節(jié)流和函數(shù)防抖實(shí)例介紹”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。