摘要:而此時是作為定時器的一個參數(shù),指向,需要更正指向。修改防抖函數(shù)立即執(zhí)行防抖函數(shù)中使用了定時器,事件觸發(fā)后會延遲一定時間才調(diào)用事件函數(shù),有時我們希望觸發(fā)事件可以立即執(zhí)行,然后需要秒后才能重新觸發(fā)執(zhí)行。
函數(shù)防抖 (debounce)
函數(shù)防抖是頻繁發(fā)生的情況下,當(dāng)有足夠的空閑時間,才會執(zhí)行代碼一次,是優(yōu)化高頻率執(zhí)行代碼的一種手段。實際開發(fā)中會遇到頻發(fā)觸發(fā)事件的情況,比如 resize, scroll, mousemove 事件。
原理事件觸發(fā) n 秒后執(zhí)行,如果在這 n 秒內(nèi)再次觸發(fā),則以新的事件時間為準(zhǔn),n 秒后執(zhí)行。無論觸發(fā)多少次,都要等到最后一次觸發(fā) n 秒后才執(zhí)行。
實現(xiàn)用 mousemove舉例,當(dāng)鼠標(biāo)移入時,在 div 內(nèi)顯示事件函數(shù)執(zhí)行的次數(shù)。防抖的簡單實現(xiàn)如下:
let count = 0; let oDiv = document.querySelector("#container"); //防抖函數(shù) function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(fn, delay); } } //事件函數(shù) function eventFn() { oDiv.innerHTML = ++count; } oDiv.onmousemove = debounce(eventFn, 1000);this指向
正常情況下,在事件函數(shù)中使用 this 指向該事件綁定的元素。而此時 eventFn 是作為定時器的一個參數(shù),this 指向 window ,需要更正 this 指向。
function debounce(fn, delay) { let timer; return function() { let _this = this; clearTimeout(timer); timer = setTimeout(function () { fn.apply(_this); }, delay); } }event對象
一般情況下,事件函數(shù) eventFn 的第一個參數(shù)為 event 對象,但此時,值為 undefined。修改防抖函數(shù):
function debounce(fn, delay) { let timer; return function() { let _this = this; let opt = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(_this, arguments); }, delay); } }立即執(zhí)行
防抖函數(shù)中使用了定時器,事件觸發(fā)后會延遲一定時間才調(diào)用事件函數(shù),有時我們希望觸發(fā)事件可以立即執(zhí)行,然后需要 n 秒后才能重新觸發(fā)執(zhí)行。我們通過傳入第三個參數(shù),判斷是否需要立即執(zhí)行。
function debounce(fn, delay, immediate) { let timer; return function() { let _this = this; let opt = arguments; timer && clearTimeout(timer); if(immediate) { let call = !timer; timer = setTimeout(function() { timer = false; }, delay); call && fn.apply(_this, opt); } else { timer = setTimeout(function() { fn.apply(_this, opt); }, delay); } } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/107721.html
摘要:基礎(chǔ)防抖我們現(xiàn)在寫一個最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下,我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時候,控制臺才會打印出一行隨機(jī)數(shù)。 為何要防抖和節(jié)流 有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等,或者諸如輸入框的實時搜索功能,我們知道如果事件處理函數(shù)無限制調(diào)用,會大大加重瀏覽器的工作量,有可能導(dǎo)致頁面卡頓影響體驗;后臺...
摘要:此時需要采用防抖和節(jié)流的方式來減少調(diào)用頻率,同時不影響原來效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時,一段時間段內(nèi)沒有再觸發(fā)事件,事件處理函數(shù)才會執(zhí)行一次,如果設(shè)定的時間到來之前就觸發(fā)了事件,延時重新開始。 js 防抖 節(jié)流 JavaScript 實際工作中,通過監(jiān)聽某些事件,如scroll事件檢測滾動位置,根據(jù)滾動位置顯示返回頂部按鈕;如resize事件,對某些自適應(yīng)頁面調(diào)整DOM的渲染;如ke...
摘要:概念函數(shù)防抖和函數(shù)節(jié)流,兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下,只有任務(wù)觸發(fā)的間隔超過指定間隔的時候,任務(wù)才會執(zhí)行。節(jié)流指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)一定時間內(nèi)方法只跑一次。 概念 函數(shù)防抖和函數(shù)節(jié)流,兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。 防抖:任務(wù)頻繁觸發(fā)的情況下,只有任務(wù)觸發(fā)的間隔超過指定間隔的時候,任務(wù)才會執(zhí)行。 節(jié)流:指定時間間隔內(nèi)只會執(zhí)行一次任...
摘要:函數(shù)防抖簡單實現(xiàn)模擬請求獲取函數(shù)的作用域和變量清除定時器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù),每隔一定時間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時間執(zhí)行,不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。 防抖(debounce) 名詞解釋:在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù),如果在這n秒內(nèi)又被觸發(fā),則重新計時。 使用場景:以百度輸入框例,比如你要查詢...
摘要:個人博客原文地址背景我們在開發(fā)的過程中會經(jīng)常使用如等事件,如果正常綁定事件處理函數(shù)的話,有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件,十分影響性能。 個人博客原文地址 背景 我們在開發(fā)的過程中會經(jīng)常使用如scroll、resize、touchmove等事件,如果正常綁定事件處理函數(shù)的話,有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件,十分影響性能。因此針對這類事件要進(jìn)行節(jié)流或者防抖處理 節(jié)流 節(jié)流的意思...
閱讀 3533·2021-11-18 13:22
閱讀 2547·2021-09-23 11:53
閱讀 714·2019-08-30 13:17
閱讀 1339·2019-08-30 13:12
閱讀 890·2019-08-29 15:43
閱讀 1091·2019-08-29 12:53
閱讀 2826·2019-08-26 18:27
閱讀 1494·2019-08-26 11:52