Question

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>

Answer 1

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