Vue項目中使用setTimeout存在的潛在問題及解決
使用setTimeout存在的潛在問題
在開發(fā)項目中遇到這樣的序曲，點擊按鈕彈框，每次進入的時候都需要默認選中Android，
這個時候就遇到了一個小坑，當用戶點擊彈框后，選擇iOS，再點擊cancel或者OK，樓主在開發(fā)的時候，點擊cancel按鈕，執(zhí)行下面代碼
this.showDialog = false; // 關閉彈框 this.createForm.platform = "Android"; // 重置下拉框的默認選擇項為Android this.createForm.secureCoreVersion = ""; // 清空輸入框的東西
然后
這幾行代碼在邏輯上看是正確的邏輯，但是實際頁面上顯示的樣子，卻不一樣，點擊cancel按鈕的時候，彈框關閉，但是彈框會在關閉前的一刻，下拉框選中的iOS 會閃一下，變成Android，體驗不是很好，于是，樓主想到了使用setTimeout來解決問題，遂寫成如下代碼
this.showDialog = false;
setTimeout(() => {
this.createForm.platform = "Android";
this.createForm.secureCoreVersion = "";
}, 500);
把 清空彈框里面表單的東西放在了定時器里面，這樣就能避免在點擊關閉按鈕的時候，下拉框選項閃一下，變成默認選項Android的問題。
但是，過了1天，有個同事跑過來跟我說，樓主的寫法存在一定的潛藏風險，那就是使用了setTimeout定時器來處理這個問題，
他的回答是：
定時器一般只能用在寫動畫里面，日常的業(yè)務邏輯層代碼盡量不要使用定時器，因為定時器雖然表面上能解決這個問題，但是，如果用戶在設置的500毫秒以內再次點擊cancel按鈕，就會出現問題，定時器的原理實際上就是把js執(zhí)行的這段代碼拿到一個宏任務里面，最后執(zhí)行
于是乎，p7水平的同事，跟我這樣說，可以換一種思路，
可以在點擊彈框彈出來的時候把彈框里面的選項都進行重置，不需要在關閉彈框的時候進行重置，其實是一個逆向思維的問題，在一開始點擊彈框打開的時候直接重置參數，這樣就能巧妙的繞過在關閉彈框出現的問題通過elementUI dialog 組件自帶的 closed 回調函數來解決問題
elementUI 的官網里面關于dialog彈框，封裝了在關閉動畫結束時執(zhí)行的回調函數，直接在這個回調函數里面執(zhí)行重置選項的邏輯就好了
上代碼
最后樓主采用的是第二種方法來解決閃現的問題的
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何實現簡易的彈出框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解關于element級聯選擇器數據回顯問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數據的展示。而且這個框架是完全免費和開源的，本文記錄下 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件的相關知識，需要的朋友一起學習下吧2021-09-09
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現這些功能,您可以構建功能強大且用戶友好的樹形表格組件,以滿足各種數據展示需求,對Vue 3 Element Plus樹形表格相關知識感興趣的朋友一起看看吧2023-12-12
vue引入iconfont圖標庫的優(yōu)雅實戰(zhàn)記錄
使用組件庫時,圖標往往不能滿足需求,所以我們常常需要用到第三方圖標庫,這篇文章主要給大家介紹了關于vue引入iconfont的相關資料,需要的朋友可以參考下2021-06-06
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結構分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結構分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強大的功能之一，它是html、css、js等的一個聚合體，封裝性和隔離性非常強2022-12-12
這篇文章主要給大家介紹了關于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構建用戶界,需要的朋友可以參考下2023-11-11
下面小編就為大家分享一篇vue項目中使用ueditor的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在vue中當我們管理數據的時候比較亂，我們要用到下面的這個庫，本文主要介紹了如何使用 Vuex的入門教程，具有一定的參考價值，感興趣的可以了解一下2022-02-02