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

Question

我已经看过所有其他与此问题类似的答案，但我无法使其适合我的情况。

我有一个页面的侧边栏包含15个自动刷新的结果，这很好。 有一个链接可将外部页面加载到带有叠加层的div中。 那么带有结果列表FULL的新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函数，就可以autoRefresh工作，但是它不会阻止该函数的运行。 只是不断刷新，也不确定在关闭div时如何停止刷新。 让我知道您是否需要更多信息。

谢谢！

Answer 1

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

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

Answer 2

好的，所以我还是想通了。 thanx尝试如果您做了。

切换完成后，将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;
    });