背景:優化搜尋框的功能,在輸入過程中,可以實時動態進行搜尋,但是為了提高搜尋效率,頻繁進行查詢,需要進行防抖
解決辦法:在輸入過程中,在一定時間內沒有輸入,再進行查詢,採用debounce;
因此在程式設計時,需要注意兩點:
第一:監聽輸入資料的變化,觸發搜尋(監聽一般想到的是watch)
第二:進行防抖,並不是所有的輸入,都需要進行搜尋,採用定時來實現
具體實踐:
方法1:
監聽資料變化,執行debounce,不直接使用watch:{}是因為debounce不能直接在watch中使用,應該放在created中
具體debounce函式實現//監聽input資料,當資料變化的時候,觸發debounce
this.$watch('input',this.debounce(()=>,3000))
如果想直接使用watch()來監聽,可以參考方法2debounce(fn, delay), delay);
}},
方法2:
監聽到變化後,觸發乙個emitdebounce函式,這個函式不是debounce,而是通過這個函式再去觸發debounce
給emitdebounce繫結debouncewatch:)
}},
editdebounce: debounce(() => , 300
debounce函式實現
個人更推薦方法1 ,思路更為清晰,且this指向明確,但在第一次使用時,會直接將debounce寫在watch中,然後進入無止盡的除錯。。。const debounce = (func, wait) =>
timeout = settimeout(() => , wait);
}
方法2中debounce中的this不指向vue例項,需要將this作為乙個引數傳參,新手容易迷糊
攻防具體實踐(1)
一 kali linux黑掉windowsxp 1.首先,在kali用命令 msfconsole 開啟metasploit。2.然後執行如下命令 useexploit windows smb ms08 067 netapi 使用ms08067漏洞攻擊程式set lhost 192.168.234.1...
聊聊lodash的debounce實現
本文同步自我的blog 前段時間團隊內部搞了乙個 訓練營,大家組織在一起實現lodash的throttle和debounce,實現起來覺得並不麻煩,但是最後和官方的一對比,發現功能的實現上還是有差距的,為了尋找我的問題,把官方原始碼閱讀了一遍,本文是我閱讀完成後的一篇總結。注 本文只會列出比較核心部...
debounce防抖函式的使用
說明 1.首頁有30多張,每次載入完都要執行乙個refresh的函式,由於執行次數過多,對refresh函式進行防抖 2.位於元件goodsitem.vue中,需要傳送事件給home.vue 步驟 1.建立乙個utils.js檔案封裝debounce函式 func為要執行的函式 要防抖的 delay...