задержка вызова qTip с использованием setTimeout и clearTimeout - PullRequest
Новая
       12

задержка вызова qTip с использованием setTimeout и clearTimeout

0 голосов
/ 28 сентября 2011

Это работало нормально: 

$('#panel_derecho a.tooltip').each(function(){

  $(this).qtip({
     content: { url: '/includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img  src="/images/loader.gif" alt="loading..." /></center>'  },
     show: { delay: 700, solo: true,effect: { length: 500 }},
     hide: { fixed: true, delay: 200 },
     position: {
     corner: {
        target: 'topLeft',
        tooltip: 'middleRight'
                }
                },
     style: {
       name: 'light',
       width: 700,
       padding: 0,border: {
         width: 4,
         radius: 3,
         color: '#5588CC'
      }
       }
   });

});

, но иногда пользователь зависал при прокрутке страницы и множестве обращений к qtip, которые не будут отображаться там, где вызывались, так что думал, что лучше всего добавить время ожидания (не так ли?)

, поэтому я попытался установить delayTip var со временем ожидания (при наведении курсора) и очистить его при наведении мыши: 

$('#panel_derecho a.tooltip').each(function(){
    var delayTip;

       $(this).bind('mouseover',function(){
            delayTip = setTimeout(function () {
              $(this).qtip({
                 content: { url: '/includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img  src="/images/loader.gif" alt="loading..." /></center>'  },
                 show: { delay: 700, solo: true,effect: { length: 500 }},
                 hide: { fixed: true, delay: 200 },
                 position: {
                 corner: {
                    target: 'topLeft',
                    tooltip: 'middleRight'
                            }
                            },
                 style: {
                   name: 'light',
                   width: 700,
                   padding: 0,border: {
                     width: 4,
                     radius: 3,
                     color: '#5588CC'
                  }
                   }
               });
           }, 500);
       };
       $(this).bind('mouseout',function(){  clearTimeout(delayTip);  });

    });

Суть в том, что подсказкане отображается, и в firebug не появляются ошибки,

что мне не хватает?

1 Ответ

1 голос
/ 28 сентября 2011

Когда тайм-аут срабатывает, ключевое слово this относится к глобальному объекту (скорее всего, window), попробуйте сделать что-то вроде этого: 

$('#panel_derecho a.tooltip').each(function(){
    var delayTip = 0;
    var self = $(this);
    self.bind('mouseover',function(){
        if (delayTip === 0) delayTip = setTimeout(function () {
            self.qtip({
                content: { url: '/includes/qtip.php?'+self.attr('rel')+' #'+self.attr('div'), text:'<center><img  src="/images/loader.gif" alt="loading..." /></center>'  },
                show: { delay: 700, solo: true,effect: { length: 500 }},
                hide: { fixed: true, delay: 200 },
                position: {
                    corner: {
                        target: 'topLeft',
                        tooltip: 'middleRight'
                    }
                },
                style: {
                    name: 'light',
                    width: 700,
                    padding: 0,border: {
                        width: 4,
                        radius: 3,
                        color: '#5588CC'
                    }
                }
            });
            delayTip = 0;
        }, 500);
    };
    self.bind('mouseout',function(){ clearTimeout(delayTip); delayTip = 0; });
});
...