Javascript 使用setTimeout和clearTimeout延迟qTip调用

这很好：

$('#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'
      }
       }
   });

});  

$（'#panel_derecho a.tooltip'）。每个（函数（）{
$（此）.qtip({
内容：{url:'/includes/qtip.php？'+$（this.attr（'rel'）+'#'+$（this.attr（'div'）），文本：''}，
显示：{延迟：700，单独：真，效果：{长度：500}，
隐藏：{修复：true，延迟：200}，
职位：{
角落：{
目标：“左上角”，
工具提示：“中右翼”
}
},
风格：{
名称：'光'，
宽度：700，
填充：0，边框：{
宽度：4，
半径：3，
颜色：“#5588CC”
}
}
});
});  

但有时用户在向下滚动页面时会悬停，许多对qtip的调用不会显示在调用的位置，因此认为添加超时是最好的选择（不是吗？）

因此，我尝试将delayTip变量设置为等待时间（悬停时），并在鼠标离开时将其清除：

$('#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);  });

    });

$（'#panel_derecho a.tooltip'）。每个（函数（）{
叶尖变异系数；
$（this.bind（'mouseover'，function（））{
delayTip=setTimeout（函数（）{
$（此）.qtip({
内容：{url:'/includes/qtip.php？'+$（this.attr（'rel'）+'#'+$（this.attr（'div'）），文本：''}，
显示：{延迟：700，单独：真，效果：{长度：500}，
隐藏：{修复：true，延迟：200}，
职位：{
角落：{
目标：“左上角”，
工具提示：“中右翼”
}
},
风格：{
名称：'光'，
宽度：700，
填充：0，边框：{
宽度：4，
半径：3，
颜色：“#5588CC”
}
}
});
}, 500);
};
$（this.bind（'mouseout'，function（）{clearTimeout（delayTip）；}）；
});

提示是工具提示没有显示，firebug中没有跳转错误

---

我遗漏了什么？

当超时触发

时，此

关键字引用全局对象（很可能是

窗口

），请尝试执行以下操作：

$('#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; });
});

$（'#panel_derecho a.tooltip'）。每个（函数（）{
var-delayTip=0；
var self=$（这是）；
self.bind（'mouseover'，function（）{
如果（delayTip==0）delayTip=setTimeout（函数（）{
self.qtip({
内容：{url:'/includes/qtip.php？'+self.attr（'rel'）+'#'+self.attr（'div'），文本：''}，
显示：{延迟：700，单独：真，效果：{长度：500}，
隐藏：{修复：true，延迟：200}，
职位：{
角落：{
目标：“左上角”，
工具提示：“中右翼”
}
},
风格：{
名称：'光'，
宽度：700，
填充：0，边框：{
宽度：4，
半径：3，
颜色：“#5588CC”
}
}
});
delayTip=0；
}, 500);
};
bind（'mouseout'，function（）{clearTimeout（delayTip）；delayTip=0；}）；
});

我会在其中添加一些调试代码，以确保您知道mouseover和mouseout事件处理程序正在启动。

console.log（'mouseover fired'）

，等等。这种方式看起来是一种改进。显示了提示，但在悬停时会多次调用它…？嘿，谢谢！这样更好；但是第一次悬停时会更好（我使用console.log检查）qtip没有被激发，秒+次是。（并且只有一个调用）；为什么这是可能的？我还将delayTip移出了.each（）函数