国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

初探函數(shù)節(jié)流和函數(shù)防抖—以項(xiàng)目為例(更新es6語(yǔ)法)

趙連江 / 3574人閱讀

摘要：而上述兩種方法，就叫做函數(shù)的節(jié)流和防抖。二函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流函數(shù)節(jié)流函數(shù)節(jié)流是讓這個(gè)函數(shù)在間隔某一段時(shí)間執(zhí)行一次。在這個(gè)項(xiàng)目中，我認(rèn)為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問(wèn)題。

一 項(xiàng)目需求

最近在做一些小的練手代碼的時(shí)候，碰到了一個(gè)很常見的問(wèn)題，當(dāng)在搜索框中進(jìn)行搜索的時(shí)候，如果快速輸入很多字符的話，搜索框的監(jiān)聽回調(diào)函數(shù)會(huì)執(zhí)行很多次，如果回調(diào)業(yè)務(wù)較復(fù)雜的話，可能會(huì)導(dǎo)致頁(yè)面運(yùn)行緩慢甚至是奔潰，那么我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢，讓輸入框在不在輸入的情況下執(zhí)行回調(diào)，或者每間隔一段時(shí)間執(zhí)行一次回調(diào)都可以解決這一問(wèn)題。而上述兩種方法，就叫做函數(shù)的節(jié)流和防抖。

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

函數(shù)節(jié)流：函數(shù)節(jié)流是讓這個(gè)函數(shù)在間隔某一段時(shí)間執(zhí)行一次。以輸入框?yàn)槔?，假設(shè)你想查詢xxxx,你想實(shí)現(xiàn)當(dāng)我開始輸入多少秒之后，執(zhí)行查詢操作。（并不一定要輸入完畢）
想看效果請(qǐng)點(diǎn)擊這里

2.2 函數(shù)防抖

函數(shù)防抖：函數(shù)防抖是讓這個(gè)函數(shù)在執(zhí)行上一次之后過(guò)了你規(guī)定的時(shí)間再執(zhí)行的一種方法。以輸入框?yàn)槔?，假設(shè)你要查詢xxxx，你想實(shí)現(xiàn)當(dāng)我輸完了xxxx之后，再進(jìn)行查詢操作，那么你就需要用到函數(shù)防抖。
經(jīng)典的函數(shù)防抖實(shí)踐如下：

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

想看效果請(qǐng)點(diǎn)擊這里

三 最佳實(shí)踐

通過(guò)上敘的描述，我們對(duì)于函數(shù)防抖和函數(shù)節(jié)流有了一定的認(rèn)識(shí)。在這個(gè)項(xiàng)目中，我認(rèn)為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問(wèn)題。所以這里把函數(shù)節(jié)流和函數(shù)防抖封裝在了一個(gè)函數(shù)里，通過(guò)第三個(gè)參數(shù)切換模式。代碼如下

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

通過(guò)第三個(gè)參數(shù)，可以控制到底使用函數(shù)防抖還是函數(shù)節(jié)流。

四 總結(jié)

函數(shù)防抖實(shí)現(xiàn)的核心在于每次都去clear一個(gè)延時(shí)器，然后每次執(zhí)行函數(shù)的時(shí)候，都去clear以前的延時(shí)器。只有當(dāng)你中斷輸入的時(shí)候，才會(huì)去執(zhí)行相應(yīng)回調(diào)。而函數(shù)節(jié)流的核心是去判斷當(dāng)前時(shí)間和開始時(shí)間的間隔是否到達(dá)了設(shè)置的delay值，如果達(dá)到了，就執(zhí)行一次回調(diào)。沒有則不執(zhí)行。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83362.html

相關(guān)文章

  • 前端常用代碼片段(三)

    摘要：可以是數(shù)字或者是字符串如果是數(shù)字則表示屬性名前加上空格符號(hào)的數(shù)量，如果是字符串，則直接在屬性名前加上該字符串。 最后更新于2019年1月13日 前端常用代碼片段(一) 點(diǎn)這里前端常用代碼片段(二) 點(diǎn)這里前端常用代碼片段(三) 點(diǎn)這里前端常用代碼片段(四) 點(diǎn)這里前端常用代碼片段(五) 點(diǎn)這里前端常用代碼片段(六) 點(diǎn)這里 1.打亂數(shù)組中元素順序（類似音樂(lè)隨機(jī)播放） function...

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

  • H5學(xué)習(xí)

    摘要：為此決定自研一個(gè)富文本編輯器。本文，主要介紹如何實(shí)現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。 對(duì)ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計(jì)模式 ② 巧用工廠模式和創(chuàng)建者模式 我為什么把他們兩個(gè)放在一起講？我覺得這兩個(gè)設(shè)計(jì)模式有相似之處，有時(shí)候會(huì)一個(gè)設(shè)計(jì)模式不能滿...

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

  • JavaScript專題系列20篇正式完結(jié)！

    摘要：寫在前面專題系列是我寫的第二個(gè)系列，第一個(gè)系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點(diǎn)贊，鼓勵(lì)指正。 寫在前面 JavaScript 專題系列是我寫的第二個(gè)系列，第一個(gè)系列是 JavaScript 深入系列。 JavaScript 專題系列共計(jì) 20 篇，主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...

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

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

    摘要：函數(shù)節(jié)流函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來(lái)。函數(shù)防抖函數(shù)在特定的時(shí)間內(nèi)不被再調(diào)用后執(zhí)行。一句話概括函數(shù)節(jié)流是從用戶開始輸入就開始計(jì)時(shí)，而函數(shù)節(jié)流是從用戶停止輸入開始計(jì)時(shí)。 函數(shù)節(jié)流 & 函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來(lái)。下面貼英文原文，建議認(rèn)真閱讀：Debouncing enforces that a function ...

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

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

0條評(píng)論

趙連江

男|高級(jí)講師

TA的文章

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