7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
大家好，我是大澈！
本文約2300+字，整篇閱讀大約需要6分鐘。
本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。
如果您只需要解決問題，請閱讀第一、二部分即可。
如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。
當用戶多次頻繁點擊按鈕時，只允許請求一次后端接口，避免重復無用請求。
沒辦法，誰讓我們的客戶就是會1秒點10次的超能力。
對于控制事件觸發的頻率，我們應該很容易的就會想到JS中的防抖和節流。
防抖（Debounce）和節流（Throttle）是前端開發中最常用的優化處理方式，相信大家也都會使用。
但是如果談起兩者定義的區分，以及兩者應用場景的不同，就會有朋友吐槽：“我靠，這不都一樣嘛！”。
所以，我們到底要怎么選擇呢？
簡單的定義區分：
詳細的定義區分：
最后，再搭配上“大澈原創”之無敵美麗動人草圖：
就問你，還有誰還區分不明白防抖和節流的定義，還有誰？
真實的項目中，在不同的場景下靈活切換使用防抖或節流，才會更加減少不必要的資源消耗，更加提高前端應用的性能和響應性。
防抖（Debounce）的應用場景：
節流（Throttle）的應用場景：
防抖代碼實例如下：
// 防抖：點擊查詢城市接口var btn1 = document.querySelector("button");var timer;btn1.onclick = function () {//先清空延時器，然后再去調用接口clearTimeout(timer);// 每次點擊按鈕都會清空延時器,然后重新計時,延遲一秒執行函數timer = setTimeout(city, 3000);};function city() {ajax({method: "get",url: "https://geoapi.qweather.com/v2/city/lookup",data: {location: "青島",key: "759cb11054344aaba4b8791ec40274dd",},aysn: true,contentType: "",success: function (res) {var obj = JSON.parse(res);console.log(obj, "請求成功的數據");},});節流代碼實例如下：
// 節流：鼠標移動在控制臺打印坐標// fn(3000, handlePrint)function fn(delay, behavior) {var timer = null;return function (val) {if (!timer) {timer = setTimeout(function () {//調用handlePrint函數behavior(val);timer = null;}, delay);}};}function handlePrint(val) {console.log(val, "我是鼠標坐標");}//調用fn把1000和handlePrint這個函數傳進去var handle = fn(3000, handlePrint);document.addEventListener("mousemove", function (e) {handle(e.offsetX);});只是看看原理，差不多了解即可，不要太糾結，項目中肯定不會這么使用，不然會被噴的。
Vue等真實項目中，往往都會調用第三方庫的函數，具體內容見第三部分。
流行的獨立JavaScript 庫：
特定于框架的JavaScript 庫：
import { useDebounce, useThrottle } from '@vueuse/core';// 防抖// 在值變化后延遲500毫秒觸發const debouncedValue = useDebounce(value, 500); // 節流// 將函數封裝為節流函數，每300毫秒觸發一次const throttledFunction = useThrottle(myFunction, 300); // 在 Vue 組件中使用防抖和節流export default {setup() {const debouncedValue = useDebounce(value, 500);const throttledFunction = useThrottle(myFunction, 300);},}本文鏈接：http://www.www897cc.com/showinfo-26-51250-0.htmlJS問題：項目中如何區分使用防抖或節流？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 看完后，你再也不用怕面試問并發編程啦
下一篇： 五種注冊中心，如何選型？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號