جافا سكريبت:إيقاف تعيين الفاصل الزمني بعد إزالة العنصر

Question

أريد تنفيذ clearInterval وظيفة تلقائيا بعد إزالة ديف التي تحتوي على setInterval وظيفة وهذا ديف هو نتيجة استجابة أجاكس لأنه لا تتوقف نفسها بعد إزالة ديف.

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

رد أجاكس data يحتوي على جافا سكريبت setInterval وظيفة مع معالج معرف الفاصل الزمني:

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

حاولت استخدام مسج تفريغ لكن نفس المشكلة:

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

حاولت أيضا استخدامه داخل استجابة أجاكس:

$(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>

و كما مسج أود أن تفعل شيئا مثل هذا

$(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 لمساعدتك على الخروج.

هذا هو نفس المثال, ولكن الآن باستخدام التمهيد تلميح.

Answer 3

يعلن underment خارج الكتلة، وعند عدم استخدام عدم استخدام var . أيضا فكرة جيدة للتحقق مما إذا كان giveacodicetagpre.