on click Disable and Enable setInterval

Question

Hi I am trying to disable the setInterval which I have done how ever I cannot enable it again and the class of my "mute" button doesn't change can someone point me in the right direction please here is my code

HTML:

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

Button:

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

Function:

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

Thank you for any help

I would add a common class for the mute button and when clicked, check for MuteOn/MuteOff class(or use a boolean) and do what you need to do. Your MuteOff click doesn't work because it doesn't exist on load — Huangism, Jul 13 '17 at 16:25
When an event binding like `(".MuteOff").on(...)` gets hit, it attaches an event to any elements that satisfy that selector. However, it seems like when this line of code gets hit, you have *no* items that have this class. The class only gets added later on, when the button is clicked. Your event looks alright, but it's attached to nothing. You can use a common class like @Huangism suggests, but it would definitely be a good move to study up on [Event Delegation](https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on). — Tyler Roper, Jul 13 '17 at 16:28

Huangism · Accepted Answer · 2017-07-13T16:34:46.293

2

I would add a common class for the mute button and when clicked, check for MuteOn/MuteOff class(or use a boolean) and do what you need to do.

Your MuteOff click doesn't work because the MuteOff element doesn't exist on load.

Set MuteOn/Off in the markup

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

You can also use the event delegation way as @Santi mentioned, but the above might be easier to understand for now.

Direct vs. Delegated - jQuery .on()

edited Jul 13 '17 at 16:34

answered Jul 13 '17 at 16:29

Huangism

16,278
7
48
74

this seems to break the clearInterval but the class change now works – ui-unicorn.co.uk Jul 13 '17 at 16:44
Did you define MyTimer before the jquery on click section? The code is the same as yours except I am using one handler – Huangism Jul 13 '17 at 16:46
My mistake I put the button code above the function and interval – ui-unicorn.co.uk Jul 13 '17 at 16:47

score 0 · Answer 2 · edited Mar 17 '18 at 23:01

0

EditTimer(3000);

EditTimer(100);

var MyTimer;

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

function MyFunction()
{
}

edited Mar 17 '18 at 23:01

YakovL

7,557
12
62
102

answered Mar 17 '18 at 21:44

Rezigdev.com

33
5

score 0 · Answer 3 · answered Jul 06 '21 at 14:19

There haven't function to enable and disable in javascript but you can clearly to use clearTimeout.

let interval;

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

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

on click Disable and Enable setInterval

3 Answers3