web項(xiàng)目開發(fā)之JS函數(shù)防抖與節(jié)流示例代碼

更新時(shí)間：2021年09月24日 14:32:10 作者：SpringSir

這篇文章主要介紹了web項(xiàng)目開發(fā)之JS函數(shù)防抖與節(jié)流實(shí)現(xiàn)的示例代碼及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助

防抖

經(jīng)典應(yīng)用常見: 手風(fēng)琴效果

引入

沒有做防抖的網(wǎng)站:

在這里插入圖片描述

做了防抖的網(wǎng)站:

請?zhí)砑訄D片描述

防抖場景1(鼠標(biāo)移入)

抖動(dòng) ：用戶本來不想觸發(fā)這個(gè)交互，但是由于鼠標(biāo)不小心抖動(dòng)誤觸發(fā)交互事件。
例子：想看第五張圖片，。不想看2 3 4張。但是鼠標(biāo)從第1張滑到第五張時(shí)候，不小心放在了2 3 4上面。誤觸發(fā)。

函數(shù)防抖：用戶連續(xù)多次觸發(fā)某個(gè)事件，則只執(zhí)行最后一次。

解決原理: 開啟定時(shí)器，間隔時(shí)間內(nèi)如果多次觸發(fā)事件，則每一次都清除上一次定時(shí)器。

實(shí)例及解決代碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>動(dòng)畫-案例《手風(fēng)琴》</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 先清除上一次定時(shí)器，以本次為準(zhǔn)
                  clearTimeout(this.timeID)
                  //1.2 開啟定時(shí)器（防抖間隔）
                  this.timeID = setTimeout(()=>{
                    this.overIndex = index;
                  },500)
              }
          },
      })
    </script>
  </body>
</html>

防抖場景2(鍵盤按鍵)

經(jīng)典應(yīng)用場景: 搜索聯(lián)想詞
-開發(fā)中, 該功能后端會使用中間件"OpenSearch"或者"Elasticsearch", 后端的邏輯處理會十分高效、快捷.
-此處只是基于前端的角度, 從減少http請求這個(gè)方面出發(fā)來進(jìn)行優(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>
</head>
<body>
    <input type="text" placeholder="請輸入搜索內(nèi)容">
    <script>
        let timeID = null;
        document.querySelector('input').oninput = function(){
            /* 函數(shù)防抖 */
            //(1)先清除以前的定時(shí)器
            clearTimeout(timeID)
            //(2)開啟防抖定時(shí)器
            timeID = setTimeout(() => {
                console.log( this.value );
            }, 500);
        }
    </script>
</body>
</html>

函數(shù)節(jié)流

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

解決原理: 用戶連續(xù)多次觸發(fā)事件，指定時(shí)間內(nèi)只會觸發(fā)一次

實(shí)例及解決代碼:

<!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(){
            /* 函數(shù)節(jié)流 */
            //(1)判斷兩次觸發(fā)事件的時(shí)間間隔
            let time = Date.now()
            if( time - lastTime >= 500 ){
                console.log('鼠標(biāo)移動(dòng)次數(shù)：' + i++);
                //(2)本次觸發(fā)時(shí)間作為下一次參考間隔
                lastTime = time
            }
        }
        // let j = 1;
        // window.onscroll = function(){
        //     //(1)判斷兩次觸發(fā)事件的時(shí)間間隔
        //     let time = Date.now()
        //     if( time - lastTime >= 500 ){
        //         console.log('鼠標(biāo)滾動(dòng)次數(shù)：' + j++);
        //         //(2)本次觸發(fā)時(shí)間作為下一次參考間隔
        //         lastTime = time
        //     }   
        // }
    </script>
</body>
</html>

以上就是web項(xiàng)目開發(fā)之JS函數(shù)防抖與節(jié)流示例代碼的詳細(xì)內(nèi)容，更多關(guān)于web項(xiàng)目JS函數(shù)防抖與節(jié)流的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: