快捷導(dǎo)航

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

更新時間：2023年01月19日 10:57:10 作者：Tencent IT

這篇文章主要介紹了Vue項目中使用setTimeout存在的潛在問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用setTimeout存在的潛在問題

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

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

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

然后

這幾行代碼在邏輯上看是正確的邏輯，但是實(shí)際頁面上顯示的樣子，卻不一樣，點(diǎn)擊cancel按鈕的時候，彈框關(guān)閉，但是彈框會在關(guān)閉前的一刻，下拉框選中的iOS 會閃一下，變成Android，體驗不是很好，于是，樓主想到了使用setTimeout來解決問題，遂寫成如下代碼

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

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

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

他的回答是：

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

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

可以在點(diǎn)擊彈框彈出來的時候把彈框里面的選項都進(jìn)行重置，不需要在關(guān)閉彈框的時候進(jìn)行重置，其實(shí)是一個逆向思維的問題，在一開始點(diǎ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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

利用vue3+ts實(shí)現(xiàn)管理后臺（增刪改查）
這篇文章主要介紹了利用vue3+ts實(shí)現(xiàn)管理后臺(增刪改查),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
Vue中使用canvas方法總結(jié)
在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對此有需要的讀者們參考學(xué)習(xí)下。
2019-02-02
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時自動更新相關(guān)的DOM元素。本文將會探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)
2023-03-03
vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面
本文主要介紹了vue實(shí)現(xiàn)token過期自動跳轉(zhuǎn)到登錄頁面，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue3項目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實(shí)現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue配置多頁面的實(shí)現(xiàn)方法
本篇文章主要介紹了vue配置多頁面的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue2 router 動態(tài)傳參,多個參數(shù)的實(shí)例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個參數(shù)的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因為公司的新項目決定使用Vue.js來做，但在使用的過程中發(fā)現(xiàn)了一個有趣的事情，因為發(fā)現(xiàn)的這個事情展開了一些對于getter和setter的思考，具體是什么下面通過這篇文章來一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。
2016-12-12
vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實(shí)現(xiàn))
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實(shí)現(xiàn),也可以通過前后端配合實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實(shí)現(xiàn),需要的朋友可以參考下
2024-04-04