快捷導(dǎo)航

vue中使用loadsh的debounce防抖函數(shù)問題

更新時間：2023年11月15日 08:58:59 作者：My_Bells

這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用loadsh的debounce防抖函數(shù)

      <s-input placeholder="請輸入查詢關(guān)鍵字" prefix-icon="magnifier" v-model="content"></s-input>
      <script>
		import {debounce} from 'lodash'
		export default {
		  watch: {
		    content: debounce(function(newVal, oldVal) {
		      this.search()
		    }, 1000)
		  },
		  methods:{
		  	search(){
				$axios.post('').then((res) => {})
			}
		  }
		}
	  </script>

      <s-button @click="handleSave"></s-button>
      <script>
		import {debounce} from 'lodash'
		export default {
		  methods:{
		  	handleSave: debounce(function() {
				//執(zhí)行方法
     		},1000),
		  }
		}
	  </script>

debounce防抖函數(shù)的使用（js和vue）

debounch防抖函數(shù)主要應(yīng)用場景，解決按鈕快速點(diǎn)擊，多次請求的問題和input輸入框多次請求的問題。接下來直接介紹在js和vue項(xiàng)目中的使用方式。

lodash工具庫地址：https://lodash.com/docs#debounce

三個參數(shù)：

_.debounce(func, [wait=0], [options={}])

options 有如下三個可選參數(shù)配置：

leading：指定在延遲開始前是否執(zhí)行 func（默認(rèn)為 false）。
maxWait：設(shè)置 func 允許被延遲的最大值。
trailing：指定在延遲結(jié)束后是否執(zhí)行 func（默認(rèn)為 true）

1.在js項(xiàng)目中的使用

（1）引用lodash工具庫：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

（2）代碼：html：<div class="ceshi">點(diǎn)擊測試</div>

js：使用jq需引入jq庫，否則報(bào)錯

        $(".ceshi").on("click",function(){
                showAlert()
        })
 
        let showAlert = _.debounce(ceshiFun,400,
        {'leading': true,
        'trailing': false})
        
        function ceshiFun(){
            console.log("測試")
        }

2.在vue項(xiàng)目中的使用

（1）安裝。進(jìn)入項(xiàng)目文件夾，執(zhí)行如下命令使用 npm 安裝 lodash：npm i --save lodash

（2）引入項(xiàng)目：import _ from 'lodash'

（3）在項(xiàng)目中使用示例：

<template>
  <div id="test">
    <button @click="btnClick">點(diǎn)擊</button>
  </div>
</template>
 
<script>
 
import _ from 'lodash';
 
export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{
    //按鈕點(diǎn)擊
    btnClick() {
      //顯示消息
      this.showAlert('歡迎訪問hangge.com');
    },
    // 顯示消息時增加防抖（500毫秒延遲）
    showAlert: _.debounce(function(message){
      alert(message);
    }, 500)
  },
  // 頁面創(chuàng)建時自動加載數(shù)據(jù)
  created() {
  }
}
</script>