章節連結
當使用 Vue Watch 的事件監聽時，若有要觸發傳送 XML 之類的事件時，屢屢發送的話會造成後端伺服器的負擔。你可以運用簡單的 Promise + setTimeout 的技巧，就可以解決這個問題。
背後原理
1. 先在要啟用的 vue 檔中，先記錄下你的每一次觸發時間。
2. 接著透過 Promise 來觸發一個 setTimeout，並藉機成功讓程式進行有了”等待”的效果
3. 接著記錄下新的時間戳記，並計算出兩者的差距
4. 若這個差距在你指定的秒數之內(像是 3000 ms = 3s)，那麼就 return 空值讓程式進行中斷
程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
data () { return { requestLastTime:null, } watch: { // 監聽變化 '你要監聽的變數': async function(newVal){ const delay = 2000; //延遲2000 毫秒執行 this.requestLastTime = (new Date()).valueOf(); await this.sleep(delay); let nowTime = (new Date()).valueOf(); let gap = nowTime - this.requestLastTime; if( gap < delay){ return }else{ 繼續執行 axios 相關指令 } } methods: { sleep (ms) { return new Promise((resolve)=>setTimeout(resolve,ms)); }, } |
其他 Vue.js 相關文章
★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構
這是一篇在 Vue 上實作按鈕 / 篩選器的資
★全文分享★ [指南] Vue.js 搭配 Docker 進行佈署
![[指南] Vue.js 搭配 Docker 進行佈署](https://smlpoints.com/wp-content/uploads/guide-deploy-vue-js-with-docker-1.png "[指南] Vue.js 搭配 Docker 進行佈署")
Docker 是個運用了虛擬化技術的套件，讓不
★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹
說到 Carousel 輪撥系列的套件，Swiper 可以
★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
在 Vue 專案內放於 src/assets 裡面的圖片檔
★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上
每次完成了一個 Vue 專案，要佈署到 Github
★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用
Vue 的專案裡，若要監測使用者的視窗大小
★全文分享★ [指南] 在 Vue 專案中，修改 樣式方法
★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案
用 Vue CLI 3，可以快速的建立一個 Vue 專案
★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
運用 Vue 和 Moment.js 來將 input-time 的 12 小
★全文分享★ [筆記] CodeSandbox 線上編輯器 模擬前端框架
隨著前端框架的發展，當需要多人編輯、
★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放
這回要挑戰工字型( I-Shape )的顯示樣板。
★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式
![[筆記] Element-UI 的自定義表格邊框樣式](https://smlpoints.com/wp-content/uploads/notes-element-ui-customized-table-border-layout-1.jpg "[筆記] Element-UI 的自定義表格邊框樣式")
Element UI 的表格算是非常常用的模組化套
★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知
Vue 的 slot 系列使用方法，頭一回在 Element-
★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示
這回在從事公司專案時，遇上了一個稍嫌
★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors
在 Vue Sass 的使用方法上，若你有和其他的
★全文分享★ [筆記] Vue 使用 SCSS
運用 Vue-cli 建立的專案，若要使用 SCSS 來
★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
在 Vue template 的檔案，有時會需要運用到 s
★全文分享★ [筆記] Vue 生命週期
每一個 Vue Instance 在創建時，都會經歷過
★全文分享★ [筆記] Vue 單元測試初探
隨著程式開發越來越龐大，那麼以「程式
★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始
Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使
★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得
Vuex 是 Vue 中用於狀態管理的工具，你可以
★全文分享★ [筆記] Vue 自訂綁定 style 標籤
Vue 中的 v-bind 有一些預設的 style 選項如 :d
★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
![[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer](https://smlpoints.com/wp-content/uploads/notes-multer-formdata-instead-of-body-parser-1.jpg "[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer")
運用 express 的框架來架設後端的 Node.js 伺
★全文分享★ [筆記] Vue 頁面元件定時自動跳轉
當 Vue 頁面需要定時自動跳轉的功能時，
★全文分享★ [筆記] Vue 刷新當前頁面
Vue 的使用上，若是要進行完某個操作後重
★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
![[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt](https://smlpoints.com/wp-content/uploads/build-a-public-chatroom-with-vue-mysql-socketio-passport-jwt-1.jpg "[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt")
這回實際演練來打造一個即時聊天室來練
★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用
![[筆記] BootstrapVue Pagination Vue 分頁套件使用](https://smlpoints.com/wp-content/uploads/notes-bootstrapvue-pagination-vue-1.jpg "[筆記] BootstrapVue Pagination Vue 分頁套件使用")
在網路世界中常用的前端 css 套件 – Bootstra
★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement
當運用官方套件迅速建立一個 Vue 專案後
★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果
使用 Vue-cli 輸出頁面結果到網頁上時，若
★全文分享★ [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
運用 Vue.js 前端框架，將發送到後端 API 請
★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題
Vue-cli 運用 npm run build 將專案打包成靜態
★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定
在本機端執行前後端(全端)共同開發時，
★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
這篇是解決不時在測試 Vue 專案上時，常
★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記
這篇主要是筆記下如何快速的在本機端生
