使用 setTimeout 和 clearTimeout 延迟 qTip 调用

Question

这工作正常：

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

我错过了什么？

Answer 1

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