3

clearInterval関数を含むdivを削除した後、関数を自動的に実行したいのですsetIntervalが、このdivは、divを削除しても停止しないため、ajax応答の結果です。

$('#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ハンドラーを持つdatajavascriptsetInterval関数が含まれています。

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 のライブ デモを次に示します。

コードをさらに縮小したい場合は、 CSS フレームワークを使用できます。

これは同じ例ですが、 Bootstrap Tooltipを使用しています。

于 2012-05-20T07:26:53.690 に答える
1

declare the intervalId outside the block, and when assigning don't use var. Also a good idea to check if the intervalId is still unused before set the interval.

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 に答える