单击“禁用”并启用setInterval

时间:2017-07-13 16:20:09

标签: javascript jquery function setinterval

您好我正在尝试禁用我已经完成的setInterval我怎么再也无法启用它而我的"mute"按钮的类没有改变可以有人指出我在右边方向请在这里是我的代码

HTML:

<a href="#" class="MuteOff">button</a> 
  

按钮:

$('.MuteOn').on('click tap touch', function() {
$('.MuteOn').removeClass("MuteOn").addClass("MuteOff"); //the class changes
clearInterval(MyTimer);
 });

$('.MuteOff').on('click tap touch', function() {
$('.MuteOff').removeClass("MuteOff").addClass("MuteOn"); //the class doesn't change back to MuteOn
MyTimer = setInterval(Checker, 100); //doesn't work
 });
  

功能:

var MyTimer = setInterval(Checker, 100);
 function Checker(){

if ($("body").hasClass("fp-viewing-1")) {
            audio1.play();
            }
           else {
   audio1.pause();
   audio1.currentTime = 0;
            }

if ($("body").hasClass("fp-viewing-2")) {
            audio2.play();
            }
           else {
   audio2.pause();
   audio2.currentTime = 0;
            }

if ($("body").hasClass("fp-viewing-3")) {
            audio3.play();
            }
           else {
   audio3.pause();
   audio3.currentTime = 0;
            }
}

感谢您的帮助

3 个答案:

答案 0 :(得分:2)

我会为静音按钮添加一个公共类,当单击时,检查MuteOn / MuteOff类(或使用布尔值)并执行您需要执行的操作。

您的MuteOff点击不起作用,因为加载时不存在MuteOff元素。

在标记中设置MuteOn / Off

HTML

<a href="#" class="mute-button MuteOff">button</a>

JS

$('.mute-button').on('click tap touch', function() {
    var $this = $(this);

    if( $this.hasClass("MuteOn") ) {
         // do mute off stuff
         $this.removeClass("MuteOn").addClass("MuteOff");
         clearInterval(MyTimer);
    } else {
         // do mute on stuff
         $this.removeClass("MuteOff").addClass("MuteOn");
         MyTimer = setInterval(Checker, 100);
    }
});

你也可以像@Santi提到的那样使用事件委托方式,但现在上面的内容可能更容易理解。

Direct vs. Delegated - jQuery .on()

答案 1 :(得分:0)

EditTimer(3000);

EditTimer(100);

var MyTimer;

function EditTimer(Timer)
{
    clearInterval(MyTimer);
    MyTimer = setInterval(function(){ MyFunction(); }, Timer);
}

function MyFunction()
{
}

答案 2 :(得分:0)

javascript中没有启用和禁用的功能,但您可以清楚地使用clearTimeout。

let interval;

// start setInterval
function enableInter() {
    interval = setInterval(() => {
        console.log("Start SetInterval");
    }, 5000);
}

// clear setInterval
function disabledInter() {
    clearTimeout(interval);
}