加鎖還沒用?你想知道的可能在這裏!

背景:項目基於vue,出現的問題是,有一個組件在長按的時候會出現,組件中有一個刪除按鈕,連續點擊刪除且手速很快的情況下會彈出刪除失敗的提示。

思路過程:

方案一

計數加setTimeout

方案二

記錄上一個股票代碼,只有噹噹前股票代碼和上一個股票代碼不一樣時,才能執行刪除操作

方案三

定義一個變量作爲鎖,一旦要執行修改操作,就加上鎖,updated+nextTick(這邊是微任務),這邊鎖變量不能定義在data裏面,因爲鎖一旦改變,就會觸發updated,所以放在外部定義。
//考慮到動畫影響,然後增加動畫時間

要點:
updated先於動畫執行
任務的執行順序=>(同步代碼、微任務、render、宏任務)
setTimeout(()=>{},0)的意思不是立即執行,而是立即排隊,取決於js當下線程是否空閒
vue檢查數據不會檢查外部的let定義的變量

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章