web項目開發之JS函數防抖與節流示例代碼

Posted on by

防抖

經典應用常見: 手風琴效果

引入

沒有做防抖的網站:

在這裡插入圖片描述

做瞭防抖的網站:

請添加圖片描述 

防抖場景1(鼠標移入)

抖動 ： 用戶本來不想觸發這個交互，但是由於鼠標不小心抖動誤觸發交互事件。
例子： 想看第五張圖片，。不想看2 3 4張。 但是鼠標從第1張滑到第五張時候，不小心放在瞭2 3 4上面。誤觸發。

函數防抖 ： 用戶連續多次觸發某個事件，則隻執行最後一次。

解決原理: 開啟定時器，間隔時間內如果多次觸發事件，則每一次都清除上一次定時器。

實例及解決代碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>動畫-案例《手風琴》</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 2400px;
      }
      #box {
        width: 1200px;
        height: 400px;
        border: 1px solid red;
        margin: 100px auto;
        overflow: hidden;
      }
      #box li {
        width: 100px;
        height: 400px;
        float: left;
        transition: all 0.5s ease-out;
      }
      #box li.over {
        width: 800px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <li v-for="(item,index) in list" :class="{over:overIndex == index}" @mouseenter="doEnter(index)">
            <img :src="item" alt="">
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      let app = new Vue({
          el:'#box',
          data:{
              overIndex:0,
              list:[
                  './images/collapse/1.jpg',
                  './images/collapse/2.jpg',
                  './images/collapse/3.jpg',
                  './images/collapse/4.jpg',
                  './images/collapse/5.jpg',
              ],
              timeID:null
          },
          methods: {
              doEnter(index){
                  /* 開啟防抖 */
                  //1.1 先清除上一次定時器，以本次為準
                  clearTimeout(this.timeID)
                  //1.2 開啟定時器（防抖間隔）
                  this.timeID = setTimeout(()=>{
                    this.overIndex = index;
                  },500)
              }
          },
      })
    </script>
  </body>
</html>

防抖場景2(鍵盤按鍵)

經典應用場景: 搜索聯想詞
-開發中, 該功能後端會使用中間件”OpenSearch”或者”Elasticsearch”, 後端的邏輯處理會十分高效、快捷.
-此處隻是基於前端的角度, 從減少http請求這個方面出發來進行優化

<!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>
</head>
<body>
    <input type="text" placeholder="請輸入搜索內容">
    <script>
        let timeID = null;
        document.querySelector('input').oninput = function(){
            /* 函數防抖 */
            //(1)先清除以前的定時器
            clearTimeout(timeID)
            //(2)開啟防抖定時器
            timeID = setTimeout(() => {
                console.log( this.value );
            }, 500);
        }
    </script>
</body>
</html>

函數節流

概念: 解決高頻事件帶來的性能問題;高頻事件： 在頁面中，有些事件觸發頻率非常的高。
例如: 鼠標移動，滾輪事件。

解決原理: 用戶連續多次觸發事件，指定時間內隻會觸發一次

實例及解決代碼:

<!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>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        let lastTime = null;
        
        let i = 1;
        window.onmousemove = function(){
            /* 函數節流 */
            //(1)判斷兩次觸發事件的時間間隔
            let time = Date.now()
            if( time - lastTime >= 500 ){
                console.log('鼠標移動次數：' + i++);
                //(2)本次觸發時間作為下一次參考間隔
                lastTime = time
            }
        }
        // let j = 1;
        // window.onscroll = function(){
        //     //(1)判斷兩次觸發事件的時間間隔
        //     let time = Date.now()
        //     if( time - lastTime >= 500 ){
        //         console.log('鼠標滾動次數：' + j++);
        //         //(2)本次觸發時間作為下一次參考間隔
        //         lastTime = time
        //     }   
        // }
    </script>
</body>
</html>

以上就是web項目開發之JS函數防抖與節流示例代碼的詳細內容，更多關於web項目JS函數防抖與節流的資料請關註WalkonNet其它相關文章！

推薦閱讀：