欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

老生常談Javascript的防抖和節(jié)流

 更新時(shí)間:2022年02月11日 11:26:27   作者:執(zhí)手天涯@  
這篇文章主要為大家詳細(xì)介紹了Javascript的防抖和節(jié)流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

1. 什么是防抖

【解釋】: 防抖策略(debounce)是當(dāng)事件被觸發(fā)后,延遲 n 秒后再執(zhí)行回調(diào),如果在這 n 秒內(nèi)事件又被觸發(fā),則重新計(jì)時(shí)。

【圖解】:

在這里插入圖片描述

【作用】:

當(dāng)用戶頻繁觸發(fā)該事件的時(shí)候,確保只進(jìn)行最后一次的請(qǐng)求操作,節(jié)約請(qǐng)求的資源

【實(shí)現(xiàn)輸入框的防抖】:

var timer = null                    // 1. 防抖動(dòng)的 timer
 function debounceSearch(keywords) { // 2. 定義防抖的函數(shù)
    timer = setTimeout(function() {
    // 發(fā)起 JSONP 請(qǐng)求
    getSuggestList(keywords)
    }, 500)
 }
 $('#ipt').on('keyup', function() {  // 3. 在觸發(fā) keyup 事件時(shí),立即清空 timer
    clearTimeout(timer)
    // ...省略其他代碼
    debounceSearch(keywords)
 })

【實(shí)現(xiàn)建議框緩存】:

定義全局緩存對(duì)象

  // 緩存對(duì)象
  var cacheObj = {}

將搜索結(jié)果保存到緩存對(duì)象中

 // 渲染建議列表
 function renderSuggestList(res) {
    // ...省略其他代碼
   // 將搜索的結(jié)果,添加到緩存對(duì)象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }

優(yōu)先從緩存中獲取搜索建議

 // 監(jiān)聽(tīng)文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代碼
    // 優(yōu)先從緩存中獲取搜索建議
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
    // 獲取搜索建議列表
    debounceSearch(keywords)
  })

2、什么是節(jié)流

【解釋】: 減少一段時(shí)間內(nèi)事件的觸發(fā)頻率。也叫節(jié)流策略。

【圖解】:

在這里插入圖片描述

【應(yīng)用】

  • 鼠標(biāo)連續(xù)不斷地觸發(fā)某事件(如點(diǎn)擊),只在單位時(shí)間內(nèi)只觸發(fā)一次;
  • 懶加載時(shí)要監(jiān)聽(tīng)計(jì)算滾動(dòng)條的位置,但不必每次滑動(dòng)都觸發(fā),可以降低計(jì)算的頻率,而不必去浪費(fèi) CPU 資源;

【鼠標(biāo)跟隨案例】:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #angel {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="./angel.gif" alt="" id="angel" />
  <script>
    $(function () {
      // 獲取圖片元素
      var angel = $('#angel')
      // 綁定鼠標(biāo)移動(dòng)事件
      $(document).on('mousemove', function (e) {
        // 獲取鼠標(biāo)到x和y軸的距離設(shè)置給圖片的高和左
        $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px')
      })
    })
  </script>
</body>
</html>

3、節(jié)流閥

【解釋】:

  • 節(jié)流閥為空,表示可以執(zhí)行下次操作;不為空,表示不能執(zhí)行下次操作。
  • 當(dāng)前操作執(zhí)行完,必須將節(jié)流閥重置為空,表示可以執(zhí)行下次操作了。
  • 每次執(zhí)行操作前,必須先判斷節(jié)流閥是否為空。

【使用節(jié)流優(yōu)化】:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #angel {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="./angel.gif" alt="" id="angel" />
  <script>
    $(function () {
      // 定義一個(gè)節(jié)流閥
      var timer = null;
      // 獲取圖片元素
      var angel = $('#angel')
      // 綁定鼠標(biāo)移動(dòng)事件
      $(document).on('mousemove', function (e) {
        // 判斷節(jié)流閥是否為空
        if (timer) return
        // 控制節(jié)流閥的時(shí)間
        timer = setTimeout(function () {
          // 獲取鼠標(biāo)到x和y軸的距離設(shè)置給圖片的高和左
          $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px')
          // 清空節(jié)流閥
          timer = null
        }, 100)
      })
    })
  </script>
</body>
</html>

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!   

相關(guān)文章

  • javascript 學(xué)習(xí)筆記(八)javascript對(duì)象

    javascript 學(xué)習(xí)筆記(八)javascript對(duì)象

    昨天看了些有關(guān)javascript對(duì)象方面的文章,以下是自己的一些學(xué)習(xí)心得及體會(huì),希望同大家共同討論!
    2011-04-04
  • js閉包的用途詳解

    js閉包的用途詳解

    js閉包可以用在許多地方。它的最大用處有兩個(gè),一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量,另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。具體怎么理解呢,各位看官請(qǐng)仔細(xì)看好下文
    2014-11-11
  • javascript學(xué)習(xí)筆記(六)數(shù)據(jù)類(lèi)型和JSON格式

    javascript學(xué)習(xí)筆記(六)數(shù)據(jù)類(lèi)型和JSON格式

    JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,我們稱(chēng)之為JavaScript對(duì)象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢(shì)之一是JSON實(shí)際上就是JavaScript。它基于ECMAScript第3版中JavaScript對(duì)象字面量語(yǔ)法子集的一種文本格式。
    2014-10-10
  • javascript類(lèi)型系統(tǒng)——undefined和null全面了解

    javascript類(lèi)型系統(tǒng)——undefined和null全面了解

    下面小編就為大家?guī)?lái)一篇javascript類(lèi)型系統(tǒng)——undefined和null全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • JS聲明變量背后的編譯原理剖析

    JS聲明變量背后的編譯原理剖析

    只要是寫(xiě)過(guò)點(diǎn)JS代碼,很簡(jiǎn)單一個(gè)var 就完事了。那對(duì)于JS編譯器背后它又發(fā)生了什么呢?那就一步步通過(guò)代碼來(lái)講起,需要了解的朋友研究下哦
    2012-12-12
  • JS中創(chuàng)建函數(shù)的三種方式及區(qū)別

    JS中創(chuàng)建函數(shù)的三種方式及區(qū)別

    這篇文章主要介紹了js函數(shù)的多種定義方法與其區(qū)別,非常的詳細(xì),有需要的小伙伴可以參考下
    2016-03-03
  • 好好了解一下Cookie(強(qiáng)烈推薦)

    好好了解一下Cookie(強(qiáng)烈推薦)

    Cookie是由服務(wù)器端生成,發(fā)送給User-Agent,瀏覽器會(huì)將Cookie的key/value保存到某個(gè)目錄下的文本文件內(nèi),下次請(qǐng)求同一網(wǎng)站時(shí)就發(fā)送該Cookie給服務(wù)器,對(duì)cookie知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-06-06
  • 關(guān)于JavaScript中string 的replace

    關(guān)于JavaScript中string 的replace

    在使用JavaScript對(duì)字符串進(jìn)行處理的時(shí)候我們經(jīng)常會(huì)用到replace方法,很簡(jiǎn)單的一個(gè)方法,以前一直不以為意,直到今天看JavaScript語(yǔ)言精粹的時(shí)候讀到了一個(gè)有趣的小例子的時(shí)候,并不是十分理解,了解了一下replace的用法才明白,原來(lái)replace不像想象中的那么簡(jiǎn)單
    2013-04-04
  • js之WEB開(kāi)發(fā)調(diào)試?yán)?Firebug 下載

    js之WEB開(kāi)發(fā)調(diào)試?yán)?Firebug 下載

    js之WEB開(kāi)發(fā)調(diào)試?yán)?Firebug 下載...
    2007-01-01
  • JavaScript函數(shù)模式詳解

    JavaScript函數(shù)模式詳解

    文章對(duì)javascript的四種函數(shù)模式進(jìn)行了詳細(xì)的解釋?zhuān)⒏缴鲜纠?,方便小伙伴們理解并?yīng)用,希望對(duì)大家能有所幫助。
    2014-11-11

最新評(píng)論