js中事件重複綁定會相應致使屢次處理程序的響應

項目中有一個選定車型的下拉組件，有品牌下拉和車系下拉，當咱們選中某品牌後，纔會彈出車系下拉。 測試中發現，當咱們在選中某個品牌下拉後反悔，又從新選中了其餘品牌，而後才選擇車系，會出現問題響應程序多執行了一次。

通過反覆調試找出緣由： 當初設計這個功能時，約定當選中品牌後，觸發車系下拉的彈出並與之綁定onChange事件，使得選中車系後請求相應數據。

問題關鍵在於，當jQuery爲同一個元素綁定兩次事件處理句柄，那麼事件觸發時，也一樣會進行兩次響應

也就是說當咱們第一次選中品牌下拉時候，就觸發了一次對車系下拉的事件綁定，而第二次選中品牌時候，又一次觸發了車系下拉的事件綁定， 這樣當咱們最終選中車系下拉時，已經觸發並對其進行了兩次事件綁定，因此最終請求數據時也會請求兩次。

ok，那咱們如何避免以前那個bug呢。 咱們能夠在每次給車系下拉綁定事件處理句柄前，先清空以前可能存在的onChange事件綁定。代碼以下：

$('input.series').unbind('change').on("change", function(e){ ... }）

只須要簡單的調用unbind方法並傳入須要被終結的事件名就能夠了。

延伸一下的話，jQuery中常常有這類處理，在進行新的處理以前，終結掉此前的處理。

場景若有個下拉菜單，設計效果是鼠標移中則顯示菜單，鼠標移除則隱藏菜單。 那麼若是咱們較快的反覆移中移除，就會產生動畫累積，那麼在最後一刻的鼠標操做並不會觸發菜單的正常顯示，反而會致使菜單不斷的收拉閃爍 由於當前的動畫隊列中排滿了好幾個處理，只有當隊列中的處理陸續結束纔會響應最後一刻符合用戶意圖的鼠標操做。 處理這個問題時，咱們須要在每次響應鼠標事件時，都馬上終結動畫隊列裏排布的以前的事件，代碼以下：

$('#target').stop(true, true).animate();

stop方法的第一個參數規定是否中止被選元素的全部加入隊列的動畫，第二個參數規定是否容許完成當前的動畫，