jQuery-Javascript setTimeout-clearTimeout 不起作用

发布于 2024-12-13 09:39:24 字数 1499 浏览 2 评论 0原文

在下面的代码片段中，只有当我在 div 上连续停留一段时间时，我才会调用 change() 函数。如果我只是浏览 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>

原文

In the snippet below, I would like to call the change() function only if I have stayed continuously over a div for a period of time. If I just skim over the div, I would like to cancel out the call to the function - using clearTimeout.

I see that the clearTimeout is not working. Someone please help me. Thanks in advance.

jQuery portion :

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失眠症患者 2024-12-20 09:39:24

每个 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);
        }
    });
});

You need an extra closure for each div, so that the tt variable is unique. Use .each to bind event listeners, effectively creating a new closure for each tt variable:

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);
        }
    });
});

回复收藏 0 原文

风铃鹿 2024-12-20 09:39:24

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

回复收藏 0 原文

琉璃梦幻 2024-12-20 09:39:24

你需要有一个 id ='aaa' 的 div 在你的 HTML 中的某个地方

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

you need to have a div with id ='aaa' some where in your HTML

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

see the jsfiddle here http://jsfiddle.net/vR5hJ/

回复收藏 0 原文

冷月断魂刀 2024-12-20 09:39:24

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

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

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

It doesn't work because you set many timeouts and store them in the same variable so the first one you set will be overwritten by the next and so on. You can check this by removing all divs inside #aaa except one and see that it works fine.

What you need to do is clear the old timeout before you set it:

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

回复收藏 0 原文