使用setTimeout和clearTimeout延迟qTip呼叫

delay qTip call using setTimeout and clearTimeout

本文关键字：qTip 呼叫延迟 clearTimeout setTimeout 使用更新时间：2023-09-26

运行正常:

$('#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中没有错误跳转，

我错过了什么?

当超时触发时，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; });
});