您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“JavaScript中防抖與節(jié)流指的是什么意思”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript中防抖與節(jié)流指的是什么意思”這篇文章吧。
函數(shù)防抖: 在頻繁觸發(fā)某一個(gè)事件時(shí),一段時(shí)間內(nèi)不再觸發(fā)該事件后才會(huì)去調(diào)用對(duì)應(yīng)的回調(diào)函數(shù),在設(shè)定間隔時(shí)間內(nèi)如果下一次事件被觸發(fā), 那么就重新開始定時(shí)器,直到事件觸發(fā)結(jié)束。
規(guī)定時(shí)間內(nèi)沒有繼續(xù)觸發(fā)事件的前提下,再去調(diào)用事件處理函數(shù);
具體如下面的例子所示:
/*定義防抖函數(shù) * func:傳入一個(gè)函數(shù),事件不再持續(xù)觸發(fā)時(shí)會(huì)調(diào)用該函數(shù) * delay:定義持續(xù)多久后執(zhí)行傳入的回調(diào)函數(shù) * */ function debounce(func,delay) { let timer = null // 用于保存定時(shí)器 return function (...args) { // 如果定時(shí)器存在,清除定時(shí)器,隨后重新設(shè)置timer if(timer !== null) clearTimeout(timer) timer = setTimeout(func, delay) // 超過(guò)delay為接收到事件會(huì)調(diào)用這里的func 必要的額時(shí)候可以修改func的this指向 由于timer對(duì)外部存在引用,因此不會(huì)被銷毀 } } /*事件處理函數(shù)*/ function testDeBounce(){ console.log('你看我執(zhí)行了幾次??') } // 接收debounce返回的函數(shù) const temp = debounce(testDeBounce(),1000) /*綁定事件,測(cè)試防抖函數(shù)*/ window.addEventListener('scroll',()=>{ temp() }); // 這樣寫最少調(diào)用一次事件處理函數(shù),最多也不會(huì)多余下面的寫法執(zhí)行的次數(shù) window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話,每當(dāng)頁(yè)面滾動(dòng)就會(huì)調(diào)用事件處理函數(shù)
總結(jié)一下思路:
1.定義一個(gè)節(jié)流函數(shù)
2.函數(shù)內(nèi)部使用一個(gè)變量保存定時(shí)器
3.返回一個(gè)函數(shù),函數(shù)內(nèi)部定義:如果定時(shí)器已經(jīng)存在就清除定時(shí)器,重新設(shè)置定時(shí)器
4.定義一個(gè)變量來(lái)接收debounce
返回的函數(shù)
5.在事件的回調(diào)函數(shù)中直接調(diào)用上一步的變量接收的方法
函數(shù)節(jié)流: 在事件持續(xù)觸發(fā)的前提下,保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù),就是函數(shù)節(jié)流;
函數(shù)節(jié)流實(shí)現(xiàn)的方式: 定時(shí)器、時(shí)間戳、定時(shí)器+時(shí)間戳;
思路:
1.定義節(jié)流函數(shù)throttle
2.定義timer
保存定時(shí)器
3.返回一個(gè)函數(shù)。函數(shù)內(nèi)部定義:如果定時(shí)器不存在,設(shè)置定時(shí)器,間隔某一時(shí)間后將timer設(shè)置為null
,如果在這之前事件再次觸發(fā),則定時(shí)器中的回調(diào)無(wú)效
<button>這是一個(gè)孤獨(dú)的按鈕</button>
/* * 定義定時(shí)器節(jié)流函數(shù) * func:傳入事件處理函數(shù) * delay:在delay指定的時(shí)間內(nèi)定時(shí)器回調(diào)無(wú)效 * */ function throttle(func,delay) { let timer = null const context = this return function(...args){ // 如果定時(shí)器不存在 if(!timer){ timer = setTimeout(()=>{ func.apply(context,args) // 考慮返回的函數(shù)調(diào)用的環(huán)境,因此這里不直接使用this timer = null // delay之后清除定時(shí)器 },delay) } } } function test() { console.log('啊啊?。?#39;) } const temp = throttle(test,1000) document.querySelector('button').addEventListener('click',()=>{ temp() })
var throttle = function(func, delay) { var prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
// 節(jié)流throttle代碼(時(shí)間戳+定時(shí)器): var throttle = function(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
以上是“JavaScript中防抖與節(jié)流指的是什么意思”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。