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以及如何停止刷新。如果您需要更多信息，请告诉我。

感谢名单！

Answer 1

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

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

Answer 2

好吧所以无论如何我都想通了。如果你做了，那就试试吧。

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

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

2 个答案: