Vue項目中使用setTimeout存在的潛在問題及解決

使用setTimeout存在的潛在問題

在開發項目中遇到這樣的序曲，點擊按鈕彈框，每次進入的時候都需要默認選中Android，

這個時候就遇到瞭一個小坑，當用戶點擊彈框後，選擇iOS，再點擊cancel或者OK，樓主在開發的時候，點擊cancel按鈕，執行下面代碼

 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定時器來處理這個問題，

他的回答是：

定時器一般隻能用在寫動畫裡面，日常的業務邏輯層代碼盡量不要使用定時器，因為定時器雖然表面上能解決這個問題，但是，如果用戶在設置的500毫秒以內再次點擊cancel按鈕，就會出現問題，定時器的原理實際上就是把js執行的這段代碼拿到一個宏任務裡面，最後執行

於是乎，p7水平的同事，跟我這樣說，可以換一種思路，

可以在點擊彈框彈出來的時候把彈框裡面的選項都進行重置，不需要在關閉彈框的時候進行重置，其實是一個逆向思維的問題，在一開始點擊彈框打開的時候直接重置參數，這樣就能巧妙的繞過在關閉彈框出現的問題通過elementUI dialog 組件自帶的 closed 回調函數來解決問題

elementUI 的官網裡面關於dialog彈框，封裝瞭在關閉動畫結束時執行的回調函數，直接在這個回調函數裡面執行重置選項的邏輯就好瞭

最後樓主采用的是第二種方法來解決閃現的問題的

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。