web專案開發之JS函式防抖與節流示例程式碼

阿新 • • 發佈：2021-09-26

防抖

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

引入

沒有做防抖的:

在這裡插入圖片描述

做了防抖的網站:

請新增圖片描述

防抖場景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 aMoVOB 
uto;
        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="web專案開發之函式防抖與節流示例程式碼">
        </li>
      </ul>
    </div>
    <script src="./.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 htm客棧l>
<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函式防抖與節流的資料請關注我們其它相關文章！