如何在slidetoggle（）上停止setInterval（）然后重新启动？

Question

我已经看过类似于这个问题的所有其他答案，但我无法让它们适合我的场景。

我有一个页面，其中包含15个自动刷新结果的边栏，这很好。 有一个链接可将外部页面加载到带有叠加层的div中。那么这个新的div与结果的完整清单也会自动刷新，同时其打开。 （不希望两个div在后台自动刷新）

在此full list div每个结果都有一个jquery slideToggle()函数来显示更多信息。

我正在尝试（和失败）做的是使自动刷新停止，而slideToggle正在显示信息，否则当页面刷新时返回到display:none。

这里是我的最新尝试：

HTML

main page has div to load into... 
<div id="full_list"> loading... </div> 

外部页面的完整列表

<div class="events_list">   <!--container for events --> 
<ul><li>       
<div class="full_event">   <!--each event in a list--> 
#1<b> 500 m race </b>    <!--this bit always seen --> 

<div class="event_slide">   <!--this div is slideToggled() --> 
<b>500m race </b><br> 
<div class="evntdescription"> 
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m 
</div> 
</div> 
</div> 
</li></ul> 
</div> 

现在我尝试的JavaScript

var refreshData; 

var infodisplay = $('.event_slide').css('display'); 

function autoRefresh() { 

      if(infodisplay == 'none') 
       { 
      refreshData = setInterval(function() {   
        $('#full_list').load('eventlist.php'); 
        }, 1000); 
       }  
      else 
       { 
      clearInterval(refreshData); 
       } 

};  

$("#view_events").click(function(){  //this opens up the div // 
     overlay.fadeIn(1000).appendTo(document.body); 
     $('#full_list').load('eventlist.php'); //loads external page// 
     $('#full_list').fadeIn(800, function() { 

     autoRefresh(); //start the auto refresh/ 

     $("body").on("click",".full_event", function(e){ 

     $(this).children('div.event_slide').slideToggle(300, function() { 

     autoRefresh(); //thought it might work if i add the function 
             //here as well // 

     }); 
     }); 

     }); 

     $("body").on("click","#close", function(e){ //closes div// 
      overlay.fadeOut(300); 
      $("#full_list").fadeOut(300); 
      }); 

     return false; 
     }); 

基本上它什么都不做。如果我摆脱了第二个autoRefresh函数，我已经使其工作，但它不会停止功能。只是不断刷新，也不知道如何停止刷新，当我关闭div也。 让我知道你是否需要更多信息。

thanx！

Answer 1

行，所以我想通了呢。 thanx因为尝试，如果你做了tho。

在切换完成后，将if语句放入函数中。

唯一的缺点是，如果它在同一时间刷新，它仍然会“刷新”它会刷新。它将不会清除间隔，直到切换完成。不知道该怎么办。 改变了代码这样：

var refreshData; 

function autoRefresh() {    
     refreshData = setInterval(function() {   
       $('#full_list').load('eventlist.php'); 
       }, 10000); 
       }; 

$("#view_events").click(function(){  //this opens up the div // 
    overlay.fadeIn(1000).appendTo(document.body); 
    $('#full_list').load('eventlist.php'); //loads external page// 
    $('#full_list').fadeIn(800, function() { 

    autoRefresh(); //start the auto refresh/ 

    $("body").on("click",".full_event", function(e){ 

    $(this).children('div.event_slide').slideToggle(300, function() { 

    if($(this).css('display') == 'none') 
     {$('#full_list').load('eventlist.php'); 
     autoRefresh(); 
     } 
     else 
     { 
     clearInterval(refreshData); 
     }; 

    }); 
    }); 

    }); 

    $("body").on("click","#close", function(e){ //closes div// 
     overlay.fadeOut(300); 
     $("#full_list").fadeOut(300); 
     }); 

    return false; 
    }); 

Answer 2

尝试清除的时间间隔时异步加载完成：

function autoRefresh() { 
    refreshData = setInterval(function() { 
    $('#full_list').load('eventlist.php', function() { 
     clearInterval(refreshData); 
    }); 
}, 1000); };