JavaScript：要素の削除後にSetIntervalを停止します

Question

clearInterval関数を含むDIVを削除した後にsetInterval関数を自動的に実行し、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応答dataは、インターバルIDハンドラを備えたJavaScript setInterval関数を含む：

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

.

私は jQuery unload を使用しようとしましたが、同じ問題があります。

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

.

私はAjax応答の中でそれを使用することも試みました：

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

.

Answer 1

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

.

Answer 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です。< / P>

    ---

    あなたががコードを縮小するのを望むなら、あなたはあなたを助けるために cssフレームワークを使うことができます。

    これは同じ例ですが、 bootstrap tooltip

Answer 3

ブロック外の intervalide を宣言し、割り当てを使用しない場合は var を使用してください。 間隔を設定する前に intervalide がまだ使用されていないかどうかを確認することをお勧めします。

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

.