章節連結
這是一個近期在開發中遇上「重複發送遠端請求」的狀況。簡言之,按鈕事件僅需要註冊一次就好。若你的函式中,有機會多次註冊的話,那記得在執行「關閉畫面、取消……」等功能時,要順便把註冊的事件給清除掉。
情境
1. 當你按下按鈕時,會同時觸發多次同樣的 request 事件
2. 隨著註冊的事件數量越來越多,那麼發送的 request 也會一起增加
3. 你會發現這個情境,在「重新整理」或是「跳轉」到其他頁面,就會消失
原因
借用一下 【筆記】來搞懂Event Loop吧!這篇的內文圖:
當你無形中執行了多次相同的 $(‘#exampleModal’).on(‘btnDOM’, function…) ,也就是 addEventListener(‘click’,function……)。這樣一來,當符合觸發條件時,就會重複發送相同事件。
Demo
在範例中點開 Modal 按鈕時,會逐漸累積註冊相同的按鈕事件,這樣一來發送 request 時,就會出現以上情境了。
解決方法也不難,就是在事件完成、初始化或是關閉視窗時,記得將事件清空即可 $(‘#exampleModal’).off(‘btnDOM’)。若以範例來說,就是將註解掉的 closeButton() 打開即可
Reference
1. Duplicate ajax to call modal and close
2. jquery .off(): how to remove a certain click handler only?
延伸閱讀
- [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
- [筆記] Ultimate AWS Certified Developer Associate (27)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)
- [筆記] 六角學院 Node.js 2022 直播班記錄 – 10 Mongoose 額外補充和模組化