最近趕項(xiàng)目，一周上7天班每天還得搞到十點(diǎn)十一點(diǎn)，實(shí)在是沒(méi)有精力再看書(shū)了。
但是寫(xiě)項(xiàng)目的時(shí)候碰到的一個(gè)Bug完全超出了我的知識(shí)范圍，我隱隱感覺(jué)如果解決了應(yīng)該會(huì)讓我對(duì)JS有更好的認(rèn)識(shí)，于是沒(méi)有求助大佬，懇求給我些時(shí)間來(lái)解決。大佬正忙著也不想弄什么疑難雜癥于是同意了。我可得好好看看這玩意什么毛病再寫(xiě)個(gè)博客記一記了........
Bug是這樣的：

gif1

做了一個(gè)選擇本月、本年、全部的部分，但是很奇怪，調(diào)的都是同樣一個(gè)函數(shù)只是傳參不同，點(diǎn)擊本月、本年后可以正常的把展示的樣式改為點(diǎn)擊后的 ，但是全部卻點(diǎn)擊不上。

pic2

可以看到，我是用dateBtnChoose這個(gè)變量來(lái)進(jìn)行選擇判斷的。二話不說(shuō)先Console。

pic3

先在本月后面加了dateBtnChoose的調(diào)用，然后再在調(diào)用的函數(shù)里寫(xiě)了console.奇怪的事情發(fā)生了。

gif5

發(fā)生了我根本無(wú)法理解的事情，同樣一個(gè)函數(shù)傳參，同樣的顯示，參數(shù)是1、2時(shí)正常，但是參數(shù)為3的時(shí)候可以確定type=3，dateBtnChoose同樣等于3，但是dateBtnChoose顯示出來(lái)居然是0?排查之后發(fā)現(xiàn)，也沒(méi)有對(duì)dateBtnChoose=3進(jìn)行判斷的部分，也就是說(shuō)根本不是代碼里進(jìn)行操作導(dǎo)致的Bug.

png4

開(kāi)始頭疼了。排查了半天無(wú)果，向大佬求助，大佬看了一下給了提示：“雙向綁定”。

于是開(kāi)始思考。已知這些值是雙向綁定的....有什么問(wèn)題嗎？苦苦思索，有哪里把dateBtnChoose置0了嗎？找了一遍，發(fā)現(xiàn)日期input框中@change綁定的@dateSelectClear只有一行：

this.dateBtnChoose= 0;

于是嘗試刪除@change,發(fā)現(xiàn)問(wèn)題沒(méi)有了。但需求是，如果我手動(dòng)在UI的日期框輸入了日期，那么按鈕選擇置0，這個(gè)@change不能隨便刪除。再仔細(xì)想想，我大概明白是怎么一回事了。

在點(diǎn)擊button后，調(diào)用了函數(shù)selectsearchDate（type)，此時(shí)將this.dateBtnChoose的值置為type.但是selectsearchDate這個(gè)函數(shù)同樣操作了綁定在el-date-picker上的this.searchParamsObj,這個(gè)操作會(huì)引起el-date-picked的改變，繼而觸發(fā)@change，然后觸發(fā)函數(shù)dateSelectClear，將this.dateBtnChoose置0.

那么怎么解決呢？想了半天，有點(diǎn)束手無(wú)策。問(wèn)大佬，大佬提示：“你傻嗎，加個(gè)讀寫(xiě)開(kāi)關(guān)不就行了。”

大概明白怎么做了。加入一個(gè)讀寫(xiě)開(kāi)關(guān)值isBtnStatus,在值change的時(shí)候做讀寫(xiě)保護(hù)。

使用值isBtnStatus:

pic5

只有當(dāng)isBtnStatus不為1時(shí)，才在觸發(fā)@change的時(shí)候?qū)ataBtnChoose置為0，并在觸發(fā)@change后將isBtnStatus置為0.

pic6

在selectsearchDate中加入對(duì)isBtnStatus值的操作。賦值之后，將isBtnStatus置0。因?yàn)?！this.isBtnStatus的值為0，接下來(lái)對(duì)startdate和enddate的操作并不會(huì)觸發(fā)@change中的置0，而在對(duì)startdate和enddate進(jìn)行操作、觸發(fā)@change后，重新將isBtnStatus置0.此時(shí)的@change再進(jìn)行觸發(fā)，即可為正常值。

但是，又發(fā)現(xiàn)了一個(gè)新的問(wèn)題，那就是點(diǎn)擊多次以后偶爾會(huì)出現(xiàn)點(diǎn)擊日期框后按鈕樣式并未轉(zhuǎn)變的問(wèn)題。

點(diǎn)擊多次以后會(huì)出現(xiàn)偶爾有一次，點(diǎn)擊一個(gè)按鈕后，通過(guò)更改日期值并沒(méi)有辦法將按鈕值清零。出現(xiàn)頻率大概是點(diǎn)擊7-8次出現(xiàn)一次。這下我就確實(shí)有些不知如何是好了，于是無(wú)奈又只能請(qǐng)教大佬。

大佬看了以后陷入了沉思。語(yǔ)重心長(zhǎng)的給了我提示：“這么明顯的異步請(qǐng)求問(wèn)題都看不出來(lái)？執(zhí)行完選擇后加個(gè)setTimeout不就好了嗎？是不是傻？”

我感覺(jué)大佬說(shuō)的很對(duì)。searchByType（)函數(shù)調(diào)用了接口，js進(jìn)行異步執(zhí)行，此時(shí)會(huì)出現(xiàn)接口還在調(diào)取中，

this.searchParamsObj.StartTime=startdate;

this.searchParamsObj.EndTime=enddate;

這兩句還沒(méi)有執(zhí)行完，就直接執(zhí)行

this.isBtnStatus = 0;

然后接口又調(diào)到數(shù)據(jù)了，觸發(fā)@change，血崩，功能失效。

于是我把函數(shù)改成：

pic8

終于沒(méi)有問(wèn)題了，感動(dòng)。

這次的Bug還是讓我感到有點(diǎn)慚愧的，這么多基礎(chǔ)知識(shí)居然理解的這么淺薄，碰到實(shí)際問(wèn)題就蠢的找不著北，真雞兒丟人......

默默刷Vue官方文檔去了....