Java Script去抖的问题

Question

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

Answer 1

文章是我写的，我来填这个坑好了。

首先去抖逻辑用在这里没有问题，可能要实现的效果是，用户鼠标滑动很快，并不想急着改变显示状态，有一个缓冲时间。

然后，这段代码对于单个元素一点问题没有。但是，多个元素之间触发就有问题了。我试了一下，迅速划过三个button，只有最后那个button控制的文字hide了。so，为什么？

因为，hideContact是个全局变量，hideContact.tId也就是个全局变量，第一次unhover事件生成的timeId给了hideContact.tId；第二个button的unhover事件，清除hideContact.tId，会把第一个unhover事件给清除掉；同理第三个把第二个clear掉，只有第三个按钮的unhover给执行了。

当第二次调用该函数时，它会清除前一次的定时器并设置另一个

补：解决方案（参照评论），多个模块共用一个状态会出错，那么把每个模块的状态隔离开就OK了，具体代码怎么写就不详细说了。