Java Script去抖的問(wèn)題

問(wèn)題描述

在看了 https://segmentfault.com/p/12... 關(guān)于節(jié)流，去抖的文章后，發(fā)現(xiàn)項(xiàng)目中有個(gè)位置還比較適合用debounce來(lái)解決于是決定嘗試，但是去抖是ok了，發(fā)現(xiàn)出現(xiàn)個(gè)新的問(wèn)題一直沒(méi)想明白想請(qǐng)教一下；

具體就是項(xiàng)目中有位置顯示各種聯(lián)系方式（微信，QQ，電話），當(dāng)鼠標(biāo)移入其中某一個(gè)時(shí)會(huì)展現(xiàn)對(duì)應(yīng)的號(hào)碼，移出后則消失，加完去抖的代碼后發(fā)現(xiàn)只要快速在三個(gè)間移動(dòng)可能會(huì)出現(xiàn)，最后移出的那個(gè)聯(lián)系方式不會(huì)消失的問(wèn)題。

相關(guān)代碼

<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>

回答

編輯回答

別逞強(qiáng)

hover 事件要去什么抖啊，加了debounce 就可能會(huì)出現(xiàn)你現(xiàn)在的問(wèn)題啊，因?yàn)?，代碼可能不被執(zhí)行啊
hover 只觸發(fā)一次，不是連續(xù)觸發(fā)的，更本沒(méi)有去抖的必要

2018年6月17日 15:36

編輯回答

兔寶寶

你鼠標(biāo)移出的時(shí)候還做什么延遲哦鼠標(biāo)移出的邏輯應(yīng)該是直接清掉定時(shí)函數(shù)啊

 $(function() {
        $('.service_action_btn').hover(function() {
            var id_str = $(this).data('id');// #contact_qq
            debounce(showContact, $(id_str));
        }, function() {
            if (showConcat.tId){
               clearTimeout(showConcat.tId)
               showConcat.tId=null
            }
        });
    });

2018年2月6日 04:59

編輯回答

神曲

按邏輯應(yīng)該是第一個(gè)移入的不會(huì)消失呀，快速劃過(guò)的話第一個(gè)的隱藏并不會(huì)觸發(fā)。沒(méi)搞清楚為什么是最后移入的沒(méi)有消失。

比較贊同樓下的意見(jiàn)，移出的時(shí)候沒(méi)有必要添加防抖，移除后立即清除顯示的setTimeout并隱藏，視覺(jué)效果沒(méi)有什么毛病。

<script type="text/javascript">
    $(function() {
        $('.service_action_btn').hover(function() {
            var id_str = $(this).data('id');
            debounce(showContact, $(id_str));
        }, function() {
            var id_str = $(this).data('id');
            clearTimeout(showContact.tId);
            hideContact.call($(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>

發(fā)現(xiàn)segmentfault右側(cè)的相關(guān)標(biāo)簽就是類似的效果 https://segmentfault.com/t/se...，且顯示和隱藏都是延時(shí)的，想了想把代碼改了下，隱藏不做防抖只添加延時(shí)。

<script type="text/javascript">
    $(function() {
        $('.service_action_btn').hover(function() {
            var id_str = $(this).data('id');
            debounce(showContact, $(id_str), true);
        }, function() {
            var id_str = $(this).data('id');
            debounce(hideContact, $(id_str), false);
        });
    });

    function debounce(method, context, show) {
        show ? clearTimeout(method.tId) : clearTimeout(showContact.tId);
        method.tId = setTimeout(function() {
            method.call(context);
        }, 500);
    }

    function showContact() {
        this.show();
    }
    function hideContact() {
        this.hide();
    }
</script>

2017年12月19日 15:00

編輯回答

凹凸曼

文章是我寫的，我來(lái)填這個(gè)坑好了。

首先去抖邏輯用在這里沒(méi)有問(wèn)題，可能要實(shí)現(xiàn)的效果是，用戶鼠標(biāo)滑動(dòng)很快，并不想急著改變顯示狀態(tài)，有一個(gè)緩沖時(shí)間。

然后，這段代碼對(duì)于單個(gè)元素一點(diǎn)問(wèn)題沒(méi)有。但是，多個(gè)元素之間觸發(fā)就有問(wèn)題了。我試了一下，迅速劃過(guò)三個(gè)button，只有最后那個(gè)button控制的文字hide了。so，為什么？

因?yàn)椋?code>hideContact是個(gè)全局變量，hideContact.tId也就是個(gè)全局變量，第一次unhover事件生成的timeId給了hideContact.tId；第二個(gè)button的unhover事件，清除hideContact.tId，會(huì)把第一個(gè)unhover事件給清除掉；同理第三個(gè)把第二個(gè)clear掉，只有第三個(gè)按鈕的unhover給執(zhí)行了。