Vue中使用setTimeout問(wèn)題

更新時(shí)間：2023年01月22日 10:48:12 作者：<s>LoCloudy</s>

這篇文章主要介紹了Vue中使用setTimeout問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue使用setTimeout

今天使用setTimeout 來(lái)修改一個(gè)變量的值以實(shí)現(xiàn)提示框的自動(dòng)消失。

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

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

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

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

使用setTimeout存在的潛在問(wèn)題

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

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

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

然后

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

于是，樓主想到了使用setTimeout來(lái)解決問(wèn)題，遂寫(xiě)成如下代碼

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

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

但是，過(guò)了1天，有個(gè)同事跑過(guò)來(lái)跟我說(shuō)，樓主的寫(xiě)法存在一定的潛藏風(fēng)險(xiǎn)，那就是使用了setTimeout定時(shí)器來(lái)處理這個(gè)問(wèn)題，

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

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

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

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

上代碼