Reset Interval and refire function

Question

Im using a plugin called Flapper.js which animates text/numbers like a airport style board.

I want it to cycle through an array of words which works fine. But i also have a restart ticker button, which conflicts with the setInterval i have set up.

my code is

    window.setInterval(function(){
        var messages = ["INSPIRE", "EMPOWER", "EVOLVE", "ENCHANCE", "CHANGE LIVES"],
        message = messages[Math.floor(Math.random() * messages.length)];
        $('.flap').remove();
        $(".ticker .fixedGuide h2").after("<input type='text' value='abcde' class='flap light S'>")
        $(".flap").flapper(opts).val(message).change();
    }, 5000);

    $('.restartTicker').click(function() {
        var messages = ["INSPIRE", "EMPOWER", "EVOLVE", "ENCHANCE", "CHANGE LIVES"],
        message = messages[Math.floor(Math.random() * messages.length)];
        $('.flap').remove();
        $(".ticker .fixedGuide h2").after("<input type='text' value='abcde' class='flap light S'>")
        $(".flap").flapper(opts).val(message).change();
    });

What happens when i click the .resetTicker button is that the airport style board updates just how i want it to, but then the setInterval script is still running so if i click the restartTicker button after 3 seconds, 2 seconds later it updates again. where i want it to restart the setInterval back to 0.

Answer 1

I don't know flapper, so I'm not positive this will work, but normally to reset an interval you need to assign the interval to a variable like this:

var myInterval = window.setInterval(function(){
    var messages = ["INSPIRE", "EMPOWER", "EVOLVE", "ENCHANCE", "CHANGE LIVES"],
    message = messages[Math.floor(Math.random() * messages.length)];
    $('.flap').remove();
    $(".ticker .fixedGuide h2").after("<input type='text' value='abcde' class='flap light S'>")
    $(".flap").flapper(opts).val(message).change();
}, 5000);

$('.restartTicker').click(function() {
    clearInterval(myInterval);

    myInterval = window.setInterval(function(){
        var messages = ["INSPIRE", "EMPOWER", "EVOLVE", "ENCHANCE", "CHANGE LIVES"],
        message = messages[Math.floor(Math.random() * messages.length)];
        $('.flap').remove();
        $(".ticker .fixedGuide h2").after("<input type='text' value='abcde' class='flap light S'>")
        $(".flap").flapper(opts).val(message).change();
    }, 5000);
});

Answer 2

Set the interval to a variable

var x = window.setInterval( ... );

Then you can clear it by x.clearInterval. This will stop it from running, and then you can just recall the interval to start it once more.