3

我想clearInterval在删除包含setInterval函数的 div 后自动执行函数，而这个 div 是 ajax 响应的结果，因为它在删除 div 后不会自行停止。

$('#element').mouseover(function(){
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
     });
}).mouseout(function(){
     clearInterval(intervalId);
     $('#tooltip').empty();
     $('#tooltip').remove();
});

ajax 响应包含带有间隔 Id 处理程序data的 javascript函数：setInterval

var intervalId = window.setInterval(pics_load, 3000);

我尝试使用Jquery 卸载但同样的问题：

$('#tooltip').unload(function(){
     clearInterval(intervalId);
}

我也尝试在 ajax 响应中使用它：

$(window).unload(function(){
     clearInterval(intervalId);
}
4

3 回答 3

3

您是否尝试过使用将 intervalId 存储在#element自身上$.data？

$('#element').mouseover(function() {
     var $this = $(this);
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
         // save interval id here
         var intervalId = setInterval('pics_load', 3000);
         $this.data('intervalId', intervalId);
     });
}).mouseout(function(){
     // retrieve intervalId here
     var intervalId = $(this).data('intervalId');
     clearInterval(intervalId);
     $('#tooltip').empty();
     $('#tooltip').remove();
});
于 2012-05-20T08:03:26.390 回答
2

我仍然对您通常尝试做的事情感到困惑......所以我会假设：

  • 每次用户结束#element您想要从服务器获取帮助描述并且用户很快移除对该元素的关注时，您想要隐藏帮助描述

女巫听起来很合理......但是在哪里setInterval()出现？为什么需要使用这些方法？您只想在第一次过度操作时显示它？

作为一名优秀的开发人员，我会这样做：

  • 仅在第一次向服务器询问该帮助描述，因此一旦您有多个用户，我可以在服务器上节省一些负载。
  • 使用data-属性保存描述并在可用时重新使用它们
  • 请注意，您已经可以预先填充它们。

我假设的 HTML

<div class="container">
    <h1>Stackoverflow</h1>
    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
      <li>Element 5</li>
    </ul>
</div>

作为 jQuery，我会做这样的事情

$(function() {

  $("ul li").hover(
    function() {
      // on mouse over

      if($(this).prop("data-tooltip") === undefined) {
        // use $.post() and retrieve the tooltip description,
        //   then place it on data-tooltip property

        $.post('ajax/ajax.php', function(data) {               
          // save for next time
          $(this).prop("data-tooltip", data);
          // show
          tooltip($(this), $(this).prop("data-tooltip")); 
        });
      }
      else { 
        // show saved description
        tooltip($(this), $(this).prop("data-tooltip"));
      }

    },
    function() {
      // on mouse out          
      tooltip();          
    }
  );  

});

function tooltip(elm, msg) {
  if(msg)
    $("<span class='tooltip' />").stop().html(msg).appendTo(elm).show();
  else 
    $(".tooltip").hide();
}

举个简单的例子，这里有一个JsBin 上的 Live Demo。

如果您想进一步缩小代码，可以使用CSS 框架来帮助您。

这是相同的示例，但现在使用的是Bootstrap Tooltip。

于 2012-05-20T07:26:53.690 回答
1

在块外声明intervalId，分配时不要使用var。在设置间隔之前检查intervalId是否仍然未使用也是一个好主意。

var intervalId=null;
$('#element').mouseover(f    unction(){
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
     //somewhere inside this should be:
     if (!intervalId) ... //then set the interval
 });
}).mouseout(function(){
     clearInterval(intervalId);
     intervalId=null;
     $('#tooltip').empty();
     $('#tooltip').remove();
});
于 2012-05-20T06:43:26.703 回答