jQuery-Javascript setTimeout-clearTimeout не работает - PullRequest
Новая
       2

jQuery-Javascript setTimeout-clearTimeout не работает

1 голос
/ 02 ноября 2011

В приведенном ниже фрагменте я хотел бы вызывать функцию 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>

Ответы [ 5 ]

2 голосов
/ 02 ноября 2011

Вам нужно дополнительное замыкание для каждого элемента 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);
        }
    });
});
1 голос
/ 02 ноября 2011

Попытка наведения, которая добавляет задержки http://cherne.net/brian/resources/jquery.hoverIntent.html

0 голосов
/ 02 ноября 2011

Первый пост: вам не хватает ";"после var that = $(this)

ОК, кажется, не проблема ... (но jsfiddle не проверяет это!)

Но для jsfiddle необходимо определить функцию change, прежде чем использоватьЭто.http://jsfiddle.net/bouillard/RTSFR/

0 голосов
/ 02 ноября 2011

Это не работает, потому что вы устанавливаете много тайм-аутов и сохраняете их в одной и той же переменной, поэтому первый из них будет заменен следующим, и так далее.Вы можете проверить это, удалив все div внутри #aaa, за исключением одного, и увидите, что он работает нормально.

Вам нужно просто очистить старый тайм-аут перед его установкой: 

            var that = $(this);
            if(tt) clearTimeout(tt);
            tt = setTimeout(function(){
                                change(e,that)
                            },1000) // <-- time to wait before execution
0 голосов
/ 02 ноября 2011

вам нужно иметь div с id = 'aaa' где-нибудь в вашем 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/

...