자바스크립트:정지된 후에는 요소를 제거

Question

고 싶 실행 clearInterval 기능으로 자동적으로 제거한 후에는 포함하는 div setInterval 능 이 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 응답 data 은 포함하는 javascript setInterval 기능으로 간격 Id 처리기:

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

사용하려고 했 Jquery 언로드 하지만 같은 문제는:

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

나 또한 그것을 사용하는 내부 ajax 응답:

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

Answer 1

당신은 시도 저장에 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();
});

Answer 2

나는 당신이 일반적으로하려고하는 것에 대해 여전히 혼란스러워 ... 그래서 나는 다음을 추측 할 것이다 :

• 사용자가 서버에서 도움말 설명을 가져올 때마다 사용자가 해당 요소에 대한 사용자가 초점을 제거하려는 경우 를 숨길 수 있습니다.

  마녀는 합리적으로 들리네.하지만 #element는 어디에 있니? 왜 그러한 방법을 사용해야합니까? 첫 번째 작업에만 표시하고 싶습니다.

  좋은 개발자로서, 나는 이것을 할 것이다 :

  • 는 서버에 도움을 요청할 수 있으므로 서버에 여러 사용자가있는 경우 서버에 일부로드를 저장할 수 있습니다.
  • setInterval() 속성을 사용하여 설명을 저장하고 를 사용할 때 다시 사용하십시오.
  • 메모 이미 사전 채워질 수 있습니다.

    ---

    내 가정 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 라이브 데모입니다. / P>

    ---

    을 원하면 을 더 많이 축소하려면 css framework 을 사용하여 를 사용할 수 있습니다.

    이것은 이지만 이제 부트 스트랩 툴팁 .

Answer 3

블록 외부에서 interid 을 선언하고, var 을 사용하지 마십시오. 또한 간격을 설정하기 전에 interid 가 여전히 사용되지 않는지 확인하는 것이 좋습니다.

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

.