亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Java Script去抖的問題

Java Script去抖的問題

叮當貓咪 2018-08-18 20:11:54
在看了 https://segmentfault.com/p/12... 關于節流,去抖的文章后,發現項目中有個位置還比較適合用debounce來解決于是決定嘗試,但是去抖是ok了,發現出現個新的問題一直沒想明白想請教一下;具體就是項目中有位置顯示 各種聯系方式(微信,QQ,電話),當鼠標移入其中某一個時會展現對應的號碼,移出后則消失,加完去抖的代碼后發現只要快速在三個間移動可能會出現,最后移出的那個聯系方式不會消失的問題。相關代碼<script type="text/javascript">     $(function() {         $('.service_action_btn').hover(function() {            var id_str = $(this).data('id');// #contact_qq             debounce(showContact, $(id_str));         }, function() {            var id_str = $(this).data('id');// contact_qq             debounce(hideContact, $(id_str));         });     });    function debounce(method, context) {         clearTimeout(method.tId);         method.tId = setTimeout(function() {             method.call(context);         }, 500);     }    function showContact() {        this.show();     }    function hideContact() {        this.hide();     }</script>
查看完整描述

2 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

文章是我寫的,我來填這個坑好了。

首先去抖邏輯用在這里沒有問題,可能要實現的效果是,用戶鼠標滑動很快,并不想急著改變顯示狀態,有一個緩沖時間。

然后,這段代碼對于單個元素一點問題沒有。但是,多個元素之間觸發就有問題了。我試了一下,迅速劃過三個button,只有最后那個button控制的文字hide了。so,為什么?

因為,hideContact是個全局變量,hideContact.tId也就是個全局變量,第一次unhover事件生成的timeId給了hideContact.tId;第二個button的unhover事件,清除hideContact.tId,會把第一個unhover事件給清除掉;同理第三個把第二個clear掉,只有第三個按鈕的unhover給執行了。

當第二次調用該函數時,它會清除前一次的定時器并設置另一個

補:解決方案(參照評論),多個模塊共用一個狀態會出錯,那么把每個模塊的狀態隔離開就OK了,具體代碼怎么寫就不詳細說了。


查看完整回答
反對 回復 2018-08-19
  • 2 回答
  • 0 關注
  • 674 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號