Vue使用setTimeout

今天使用setTimeout 來修改一個變量的值以實現(xiàn)提示框的自動消失。

先是這樣寫，結(jié)果發(fā)現(xiàn)函數(shù)被調(diào)用了，但是不是在3秒后。

然后呢，我給加了引號，確實是3秒后觸發(fā)了，但是

好像是指向有些不對，查了一些資料后成功實現(xiàn)目標(biāo)，

用以下兩種格式寫都可以成功調(diào)用自己寫的方法

使用setTimeout存在的潛在問題

在開發(fā)項目中遇到這樣的序曲，點擊按鈕彈框，每次進(jìn)入的時候都需要默認(rèn)選中Android，

這個時候就遇到了一個小坑，當(dāng)用戶點擊彈框后，選擇iOS，再點擊cancel或者OK，樓主在開發(fā)的時候，點擊cancel按鈕，執(zhí)行下面代碼

 this.showDialog = false; // 關(guān)閉彈框
 this.createForm.platform = "Android"; // 重置下拉框的默認(rèn)選擇項為Android
 this.createForm.secureCoreVersion = ""; // 清空輸入框的東西

然后

這幾行代碼在邏輯上看是正確的邏輯，但是實際頁面上顯示的樣子，卻不一樣，點擊cancel按鈕的時候，彈框關(guān)閉，但是彈框會在關(guān)閉前的一刻，下拉框選中的iOS 會閃一下，變成Android，體驗不是很好，

于是，樓主想到了使用setTimeout來解決問題，遂寫成如下代碼

this.showDialog = false;
setTimeout(() => {
      this.createForm.platform = "Android";
      this.createForm.secureCoreVersion = "";
}, 500);

把清空彈框里面表單的東西放在了定時器里面，這樣就能避免在點擊關(guān)閉按鈕的時候，下拉框選項閃一下，變成默認(rèn)選項Android的問題。

但是，過了1天，有個同事跑過來跟我說，樓主的寫法存在一定的潛藏風(fēng)險，那就是使用了setTimeout定時器來處理這個問題，

他的回答是：定時器一般只能用在寫動畫里面，日常的業(yè)務(wù)邏輯層代碼盡量不要使用定時器，因為定時器雖然表面上能解決這個問題，但是，如果用戶在設(shè)置的500毫秒以內(nèi)再次點擊cancel按鈕，就會出現(xiàn)問題，定時器的原理實際上就是把js執(zhí)行的這段代碼拿到一個宏任務(wù)里面，最后執(zhí)行

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

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

elementUI 的官網(wǎng)里面關(guān)于dialog彈框，封裝了在關(guān)閉動畫結(jié)束時執(zhí)行的回調(diào)函數(shù)，直接在這個回調(diào)函數(shù)里面執(zhí)行重置選項的邏輯就好了

上代碼

最后小樓采用的是第二種方法來解決閃現(xiàn)的問題的

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論