Question

在下面的代码段中，只有在change()连续停留一段时间后，我才会调用div函数。如果我只是浏览div，我想取消对该功能的调用 - 使用clearTimeout。

我看到clearTimeout无效。有人请帮帮我。提前谢谢。

jQuery部分：

       var obj=$('#aaa');

        var tt;
        obj.find('div').bind({
            mouseenter:function(e){
                var that = $(this)
                tt = setTimeout(function(){
                                    change(e,that)
                                },1000) // <-- time to wait before execution
            },
            mouseleave:function(e){
                clearTimeout(tt);
            }
        });

      function change(e,that){
        console.log(e)
        console.log(that)
      }

HTML部分：

  <div id='aaa'>
    <div><!--class a start-->
        <div>lkaiseulaweg</div>
        <div><!--class b start-->
            <div>ae</div>
            <div>dd</div>
        </div><!--class b end-->
    </div><!--class a end-->

    <div><!--class a start-->
        <i>numbers</i>
        <div><!--class b start-->
            <div>986</div>
            <div>345</div>
            <div>000</div>
            <div>999</div>
        </div><!--class b end-->

    </div><!--class a end-->
  </div>

Answer 1

每个div都需要一个额外的闭包，因此tt变量是唯一的。使用.each绑定事件侦听器，有效地为每个tt变量创建一个新的闭包：

obj.find('div').each(function(){
    var tt;
    var that = $(this)
        that.bind({
        mouseenter:function(e){
            clearTimeout(tt); // In case something weird happens
            tt = setTimeout(function(){
                                change(e,that)
                            },1000) // <-- time to wait before execution
        },
        mouseleave:function(e){
            clearTimeout(tt);
        }
    });
});

Answer 2

尝试悬停意图，这会增加延迟http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

你需要在你的HTML

中有一个id ='aaa'的div

<div id='aaa'><!--class a start-->
        <div>lkaiseulaweg</div>
        <div><!--class b start-->
            <div>ae</div>
            <div>dd</div>
        </div><!--class b end-->
    </div><!--class a end-->

    <div><!--class a start-->
        <i>numbers</i>
        <div><!--class b start-->
            <div>986</div>
            <div>345</div>
            <div>000</div>
            <div>999</div>
        </div><!--class b end-->

    </div><!--class a end-->

在这里查看jsfiddle http://jsfiddle.net/vR5hJ/

Answer 4

它不起作用，因为您设置了许多超时并将它们存储在同一个变量中，因此您设置的第一个将被下一个覆盖，依此类推。你可以通过删除#aaa中除{1}之外的所有div来检查这一点，看看它是否正常工作。

您需要做的是在设置之前清除旧的超时：

            var that = $(this);
            if(tt) clearTimeout(tt);
            tt = setTimeout(function(){
                                change(e,that)
                            },1000) // <-- time to wait before execution

Answer 5

第一篇文章：你错过了一个“;”在var that = $(this)之后

好的，似乎不是问题......（但是jsfiddle没有效果！）

但是对于jsfiddle，您需要先定义change函数才能使用它。 http://jsfiddle.net/bouillard/RTSFR/

jQuery-Javascript setTimeout-clearTimeout无效

5 个答案: