Question

我正在使用一个名为Flapper.js的插件，它可以像机场风格的板一样动画文本/数字。

我希望它能循环显示一系列正常运行的单词。但我也有一个重启的自动收报机按钮，它与我设置的setInterval冲突。

我的代码是

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

单击.resetTicker按钮后会发生的情况是机场样式板更新了我想要的内容，但是setInterval脚本仍在运行，所以如果我在3秒后点击restartTicker按钮，2秒后它会更新再次。我希望它将setInterval重新启动回0。

Answer 1

将间隔设置为变量

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

然后您可以x.clearInterval清除它。这将阻止它运行，然后您可以再次调用间隔再次启动它。

Answer 2

我不知道挡板，所以我不肯定这会起作用，但通常重置一个间隔你需要将间隔分配给这样的变量：

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

重置间隔和重放功能

2 个答案: