how to stop setInterval() on slidetoggle() then restart again?

Question

I have looked at all the other answers similiar to this question but i can't make them fit my scenario.

i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine. There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)

in this full list div each result has a jquery slideToggle() function to display more information.

what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none .

here is my latest attempt:

html

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

external page with the full list

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

now my attempted 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;
        });

basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell. let me know if you need more info.

thanx!

Answer 1

Try clearing the interval when the asynchronous loading has completed:

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

Answer 2

ok so i figured it out anyway. thanx for trying if you did tho.

put the if statement into a function after toggle is completed.

only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that. changed the code to this:

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;
    });