1

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

我有一个页面，它的侧边栏包含 15 个自动刷新的结果，这很好。有一个链接可以将外部页面加载到带有叠加层的 div 中。然后这个div带有完整结果列表的新功能也会在打开时自动刷新。（不希望两个 div 在后台自动刷新）

在这个full listdiv 中，每个结果都有一个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 时如何停止刷新。如果您需要更多信息，请告诉我。

谢谢！

4

2 回答 2

0

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

function autoRefresh () {
    refreshData = setInterval(function() {
    $('#full_list').load('eventlist.php', function() {
        clearInterval(refreshData);
    });
}, 1000);  };
于 2013-05-04T14:24:33.087 回答
0

好的，所以我还是想通了。如果你这样做了，谢谢你的尝试。

切换完成后将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;
    });
于 2013-05-04T15:09:21.663 回答