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

資訊專欄INFORMATION COLUMN

函數(shù)的節(jié)流和函數(shù)的防抖

ThreeWords / 3427人閱讀

摘要：函數(shù)的節(jié)流和函數(shù)的防抖都是優(yōu)化高頻率執(zhí)行的函數(shù)的一種方法。思路第一次調(diào)用的時(shí)候創(chuàng)建一個(gè)定時(shí)器，在指定的間隔時(shí)間之后運(yùn)行代碼，當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，清除前一次的定時(shí)器并另設(shè)置一個(gè)。

函數(shù)的節(jié)流和函數(shù)的防抖都是優(yōu)化高頻率執(zhí)行的函數(shù)的一種方法。我們知道瀏覽器中某些計(jì)算和處理要比其他昂貴很多。比如DOM的操作。當(dāng)一個(gè)操作dom的函數(shù)高頻率執(zhí)行時(shí)，我們可以根據(jù)情況進(jìn)行節(jié)流或防抖的處理。

節(jié)流函數(shù)

在每個(gè)時(shí)間段里，最多只允許運(yùn)行一次。比如說(shuō)resize調(diào)整窗口，在調(diào)整窗口的過(guò)程中，事件一直在高頻率的觸發(fā)，我們可以利用節(jié)流函數(shù)讓其在一定的間隔時(shí)間段內(nèi)最多觸發(fā)一次。用一個(gè)形象的比喻吧。生產(chǎn)線上的啤酒瓶排成隊(duì)往前跑，一個(gè)行動(dòng)遲緩的樹(shù)懶，每一段時(shí)間內(nèi)只能拿到一個(gè)瓶子。

思路：第一次調(diào)用的時(shí)候記錄一下時(shí)間戳，之后每次運(yùn)行的時(shí)候都和上一次調(diào)用的時(shí)候的時(shí)間戳比較差值，當(dāng)差值大于等于某個(gè)值的時(shí)候才執(zhí)行。

function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      timeout = setTimeout(runCallback, delay)
    }
  }
}
防抖函數(shù)

在高頻調(diào)用中，只有足夠的空閑時(shí)間，代碼才會(huì)執(zhí)行一次，常見(jiàn)的就是input的change事件，只有停頓輸入的事件大于指定的時(shí)間，代碼才會(huì)執(zhí)行一次。用一個(gè)形象的比喻吧。生活中的聲控?zé)?，只要你不停的說(shuō)話，燈就不會(huì)熄滅，只有你安靜的時(shí)間大于一定的值時(shí)，燈才會(huì)熄滅。

思路：第一次調(diào)用的時(shí)候創(chuàng)建一個(gè)定時(shí)器，在指定的間隔時(shí)間之后運(yùn)行代碼，當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，清除前一次的定時(shí)器并另設(shè)置一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行了，這個(gè)操作就沒(méi)任何意義，如果前一個(gè)定時(shí)器還沒(méi)執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器。目的是只有在執(zhí)行函數(shù)的請(qǐng)求停止了一段時(shí)間之后才執(zhí)行。根據(jù)以上思路實(shí)現(xiàn)一個(gè)防抖函數(shù)。

function debounce(action, content, delay){
    let timeoutId = null;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
            action.apply(content);
        }, delay);
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 說(shuō)說(shuō)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)目開(kāi)發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時(shí)搜索功能，我們知道如果事件處理函數(shù)無(wú)限制調(diào)用，會(huì)大大加重瀏覽器的工作量，有可能導(dǎo)致頁(yè)面卡頓影響體驗(yàn)；后臺(tái)...

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

  • 小菊花課堂之JS的防抖與節(jié)流

    摘要：文章來(lái)源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問(wèn)無(wú)遺力，少壯工夫老始成。紙上得來(lái)終覺(jué)淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩(shī)的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...

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

  • 小菊花課堂之JS的防抖與節(jié)流

    摘要：文章來(lái)源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問(wèn)無(wú)遺力，少壯工夫老始成。紙上得來(lái)終覺(jué)淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩(shī)的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...

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

  • 函數(shù)的防抖和節(jié)流是個(gè)啥？？？

    摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個(gè)函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽(tīng)是我們封裝的這個(gè)函數(shù)，將目標(biāo)函數(shù)作為回調(diào)傳進(jìn)去，等待一段時(shí)間過(guò)后執(zhí)行目標(biāo)函數(shù)第二點(diǎn)實(shí)現(xiàn)了，再看第一點(diǎn)持續(xù)觸發(fā)不執(zhí)行。 曾經(jīng)面試時(shí)候被問(wèn)到過(guò)這個(gè)，年少的我一臉無(wú)知。。。 后來(lái)工作中遇到了一個(gè)場(chǎng)景：輸入名稱的同時(shí)去服務(wù)器校驗(yàn)名稱是否重復(fù)，但發(fā)現(xiàn)之前的代碼竟然都沒(méi)做限制，輸入一次發(fā)一次請(qǐng)求。簡(jiǎn)直忍不了，就在項(xiàng)目的u...

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

  • 函數(shù)的防抖和節(jié)流

    摘要：當(dāng)持續(xù)觸發(fā)事件的時(shí)候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結(jié)束的一段時(shí)間之后，再去執(zhí)行原理第一次調(diào)用函數(shù)創(chuàng)建一個(gè)定時(shí)器，指定的時(shí)間間隔后運(yùn)行代碼。第二次調(diào)用函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。 目的：節(jié)約性能開(kāi)銷，避免多次頻繁的觸發(fā)業(yè)務(wù)邏輯造成頁(yè)面卡頓。 應(yīng)用場(chǎng)景：節(jié)流和防抖的核心其實(shí)就是限制某一個(gè)方法被頻繁觸發(fā)，比如說(shuō)DOM事件的監(jiān)聽(tīng)回調(diào)，input的keyup、keydown...

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

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

0條評(píng)論

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