亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

javascript函數(shù)防抖

SmallBoyO / 1564人閱讀

摘要：而此時(shí)是作為定時(shí)器的一個(gè)參數(shù)，指向，需要更正指向。修改防抖函數(shù)立即執(zhí)行防抖函數(shù)中使用了定時(shí)器，事件觸發(fā)后會(huì)延遲一定時(shí)間才調(diào)用事件函數(shù)，有時(shí)我們希望觸發(fā)事件可以立即執(zhí)行，然后需要秒后才能重新觸發(fā)執(zhí)行。

函數(shù)防抖 (debounce)

函數(shù)防抖是頻繁發(fā)生的情況下，當(dāng)有足夠的空閑時(shí)間，才會(huì)執(zhí)行代碼一次，是優(yōu)化高頻率執(zhí)行代碼的一種手段。實(shí)際開發(fā)中會(huì)遇到頻發(fā)觸發(fā)事件的情況，比如 resize, scroll, mousemove 事件。

原理

事件觸發(fā) n 秒后執(zhí)行，如果在這 n 秒內(nèi)再次觸發(fā)，則以新的事件時(shí)間為準(zhǔn)，n 秒后執(zhí)行。無論觸發(fā)多少次，都要等到最后一次觸發(fā) n 秒后才執(zhí)行。

實(shí)現(xiàn)

用 mousemove舉例，當(dāng)鼠標(biāo)移入時(shí)，在 div 內(nèi)顯示事件函數(shù)執(zhí)行的次數(shù)。防抖的簡(jiǎn)單實(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 指向該事件綁定的元素。而此時(shí) eventFn 是作為定時(shí)器的一個(gè)參數(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對(duì)象

一般情況下，事件函數(shù) eventFn 的第一個(gè)參數(shù)為 event 對(duì)象，但此時(shí)，值為 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ù)中使用了定時(shí)器，事件觸發(fā)后會(huì)延遲一定時(shí)間才調(diào)用事件函數(shù)，有時(shí)我們希望觸發(fā)事件可以立即執(zhí)行，然后需要 n 秒后才能重新觸發(fā)執(zhí)行。我們通過傳入第三個(gè)參數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107721.html

相關(guān)文章

  • 說說JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

    摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個(gè)最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會(huì)發(fā)現(xiàn)只有我們停止?jié)L動(dòng)秒鐘的時(shí)候，控制臺(tái)才會(huì)打印出一行隨機(jī)數(shù)。 為何要防抖和節(jié)流 有時(shí)候會(huì)在項(xiàng)目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時(shí)搜索功能，我們知道如果事件處理函數(shù)無限制調(diào)用，會(huì)大大加重瀏覽器的工作量，有可能導(dǎo)致頁面卡頓影響體驗(yàn)；后臺(tái)...

    yanwei 評(píng)論0 收藏0

  • js 防抖 節(jié)流 JavaScript

    摘要：此時(shí)需要采用防抖和節(jié)流的方式來減少調(diào)用頻率，同時(shí)不影響原來效果。函數(shù)防抖當(dāng)持續(xù)觸發(fā)事件時(shí)，一段時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來之前就觸發(fā)了事件，延時(shí)重新開始。 js 防抖 節(jié)流 JavaScript 實(shí)際工作中，通過監(jiān)聽某些事件，如scroll事件檢測(cè)滾動(dòng)位置，根據(jù)滾動(dòng)位置顯示返回頂部按鈕；如resize事件，對(duì)某些自適應(yīng)頁面調(diào)整DOM的渲染；如ke...

    int64 評(píng)論0 收藏0

  • JavaScript防抖和節(jié)流

    摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)一定時(shí)間內(nèi)方法只跑一次。 概念 函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。 防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。 節(jié)流：指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任...

    DevWiki 評(píng)論0 收藏0

  • JavaScript：函數(shù)防抖與函數(shù)節(jié)流

    摘要：函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)模擬請(qǐng)求獲取函數(shù)的作用域和變量清除定時(shí)器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。 防抖（debounce） 名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。 使用場(chǎng)景：以百度輸入框例，比如你要查詢...

    elina 評(píng)論0 收藏0

  • JavaScript之節(jié)流與防抖

    摘要：個(gè)人博客原文地址背景我們?cè)陂_發(fā)的過程中會(huì)經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。 個(gè)人博客原文地址 背景 我們?cè)陂_發(fā)的過程中會(huì)經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。因此針對(duì)這類事件要進(jìn)行節(jié)流或者防抖處理 節(jié)流 節(jié)流的意思...

    wayneli 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<