问题描述

在看了 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>