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

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

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

1. 什么是防抖

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

【圖解】:

在這里插入圖片描述

【作用】:

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

【實現輸入框的防抖】:

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

【實現建議框緩存】:

定義全局緩存對象

  // 緩存對象
  var cacheObj = {}

將搜索結果保存到緩存對象中

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

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

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

2、什么是節(jié)流

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

【圖解】:

在這里插入圖片描述

【應用】

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

【鼠標跟隨案例】:

<!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')
      // 綁定鼠標移動事件
      $(document).on('mousemove', function (e) {
        // 獲取鼠標到x和y軸的距離設置給圖片的高和左
        $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px')
      })
    })
  </script>
</body>
</html>

3、節(jié)流閥

【解釋】:

  • 節(jié)流閥為空,表示可以執(zhí)行下次操作;不為空,表示不能執(zhí)行下次操作。
  • 當前操作執(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 () {
      // 定義一個節(jié)流閥
      var timer = null;
      // 獲取圖片元素
      var angel = $('#angel')
      // 綁定鼠標移動事件
      $(document).on('mousemove', function (e) {
        // 判斷節(jié)流閥是否為空
        if (timer) return
        // 控制節(jié)流閥的時間
        timer = setTimeout(function () {
          // 獲取鼠標到x和y軸的距離設置給圖片的高和左
          $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px')
          // 清空節(jié)流閥
          timer = null
        }, 100)
      })
    })
  </script>
</body>
</html>

總結

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!   

相關文章

  • javascript 學習筆記(八)javascript對象

    javascript 學習筆記(八)javascript對象

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

    js閉包的用途詳解

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

    javascript學習筆記(六)數據類型和JSON格式

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

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

    下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)——undefined和null全面了解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • JS聲明變量背后的編譯原理剖析

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

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

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

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

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

    Cookie是由服務器端生成,發(fā)送給User-Agent,瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內,下次請求同一網站時就發(fā)送該Cookie給服務器,對cookie知識感興趣的朋友一起學習吧
    2016-06-06
  • 關于JavaScript中string 的replace

    關于JavaScript中string 的replace

    在使用JavaScript對字符串進行處理的時候我們經常會用到replace方法,很簡單的一個方法,以前一直不以為意,直到今天看JavaScript語言精粹的時候讀到了一個有趣的小例子的時候,并不是十分理解,了解了一下replace的用法才明白,原來replace不像想象中的那么簡單
    2013-04-04
  • js之WEB開發(fā)調試利器:Firebug 下載

    js之WEB開發(fā)調試利器:Firebug 下載

    js之WEB開發(fā)調試利器:Firebug 下載...
    2007-01-01
  • JavaScript函數模式詳解

    JavaScript函數模式詳解

    文章對javascript的四種函數模式進行了詳細的解釋,并附上示例,方便小伙伴們理解并應用,希望對大家能有所幫助。
    2014-11-11

最新評論