成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

30e8336b8229 / 2922人閱讀

摘要：函數(shù)防抖概念在事件被觸發(fā)秒后再執(zhí)行回調(diào)，如果在這秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。應(yīng)用場(chǎng)景給按鈕加函數(shù)防抖防止表單多次提交。對(duì)于輸入框連續(xù)輸入進(jìn)行驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。

函數(shù)防抖(debounce)

::概念:: 在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

::實(shí)例:: 如果有人進(jìn)電梯（觸發(fā)事件），那電梯將在10秒鐘后出發(fā)（執(zhí)行事件監(jiān)聽(tīng)器），這時(shí)如果又有人進(jìn)電梯了（在10秒內(nèi)再次觸發(fā)該事件），我們又得等10秒再出發(fā)（重新計(jì)時(shí)）。

應(yīng)用場(chǎng)景 
* 給按鈕加函數(shù)防抖防止表單多次提交。
* 對(duì)于輸入框連續(xù)輸入進(jìn)行AJAX驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。
* 判斷scroll是否滑到底部，滾動(dòng)事件+函數(shù)防抖

>  總的來(lái)說(shuō)，適合多次事件一次響應(yīng)的情況
函數(shù)代碼 
function debounce(fn, wait) {
  let timer = null;
  return function () {
      const context = this
      const args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log("boom")
}
// 滾動(dòng)停止時(shí)候執(zhí)行
window.onscroll = debounce(fn, 500)
函數(shù)節(jié)流(throttle)

::概念:: 規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。

::實(shí)例:: 我們知道目前的一種說(shuō)法是當(dāng) 1 秒內(nèi)連續(xù)播放 24 張以上的圖片時(shí)，在人眼的視覺(jué)中就會(huì)形成一個(gè)連貫的動(dòng)畫(huà)，所以在電影的播放（以前是，現(xiàn)在不知道）中基本是以每秒 24 張的速度播放的，為什么不 100 張或更多是因?yàn)?24 張就可以滿足人類視覺(jué)需求的時(shí)候，100 張就會(huì)顯得很浪費(fèi)資源。

應(yīng)用場(chǎng)景 
* 游戲中的刷新率
* DOM元素拖拽
* Canvas畫(huà)筆功能
 * DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
 * 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
* 計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
* Canvas 模擬畫(huà)板功能（mousemove）
* 搜索聯(lián)想（keyup）
* 監(jiān)聽(tīng)滾動(dòng)事件判斷是否到頁(yè)面底部自動(dòng)加載更多：給 scroll 加了 debounce 后，只有用戶停止?jié)L動(dòng)后，才會(huì)判斷是否到了頁(yè)面底部；如果是 throttle 的話，只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次

> 總的來(lái)說(shuō)，適合大量事件按時(shí)間做平均分配觸發(fā)。
函數(shù)代碼 
function throttle(fn, gapTime) {
  // 定義上次時(shí)間為null
  let _lastTime = null
  return function() {
    // 獲取當(dāng)前時(shí)間
    let _nowTime = +new Date()
    // 如果當(dāng)前時(shí)間-上次時(shí)間>間隔時(shí)間 或 上次時(shí)間不存在
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // 執(zhí)行函數(shù)
      fn()
      // 重置上次時(shí)間為當(dāng)前時(shí)間
      _lastTime = _nowTime
    }
  }
}

let fn = () => {
  console.log("boom")
}

window.onscroll = throttle(fn, 1000)
使用 debounce 和 throttle 以及常見(jiàn)的坑

不止一次地調(diào)用 debounce 方法：

// 錯(cuò)誤
$(window).on("scroll", function() {
  debounce(doSomething, 300)
})
// 正確
$(window).on("scroll", debounce(doSomething, 200))

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

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

相關(guān)文章

  • 徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

    摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

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

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

    摘要：而上述兩種方法，就叫做函數(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è)很常見(jiàn)的問(wèn)題，當(dāng)在搜索框中進(jìn)行搜索的時(shí)候，如果快速輸入很多字符的話，搜索框的監(jiān)聽(tīng)回調(diào)函數(shù)會(huì)執(zhí)行很多次，如果回調(diào)業(yè)務(wù)較復(fù)雜的話，可能會(huì)導(dǎo)致頁(yè)面運(yùn)行緩慢甚...

    趙連江 評(píng)論0 收藏0

  • 前端進(jìn)擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

    摘要：隆重請(qǐng)出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過(guò)時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來(lái)實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場(chǎng)景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過(guò)春招系列面試下來(lái)，不少伙伴們還...

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

  • 前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

    摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽(tīng)節(jié)流函數(shù)一般用于事件的情況較多，因?yàn)檫@些事件的觸發(fā)是連續(xù)性的，需要在一個(gè)時(shí)間間隔內(nèi)只觸發(fā)一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文 前言 在前端開(kāi)發(fā)當(dāng)中我們經(jīng)常會(huì)綁定一些事件觸發(fā)的某些程序執(zhí)行，有時(shí)這些事件會(huì)連續(xù)觸發(fā)，如瀏覽器窗口 s...

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

  • 詳談js防抖和節(jié)流

    摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問(wèn)題，比如觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。 本文由小芭樂(lè)發(fā)表 0. 引入 首先舉一個(gè)例子： 模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒(méi)有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼： 沒(méi)有防抖 ...

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

  • js 防抖 節(jié)流 JavaScript

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

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

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

0條評(píng)論

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