How to clear and start timer in lightning component with button click?

Question

I have a scenario where i need to clear the time interval with a button click and start the time interval with another click. Right now when the page loads(refreshNotifications), the time interval starts for 30 seconds. when user clicks the button it should stop the time interval and when user clicks again it should start the time interval.

Here is my current approach,

component

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<a class="notifLink" data-toggle="dropdown" aria-haspopup="true" id="notificationDropdown" aria-expanded="false" onclick="{!c.getUpdate}"> 

Controller

doInit : function(component, event, helper) {

        helper.refreshNotifications(component, helper); 

    },  

Helper

mytimer: null,

refreshNotifications: function(component, helper) {
 helper.getDetails(component, helper);
helper.resetRefreshTimer(component, helper);


},
getDetails: function(component, helper) {

        console.log('Success getDetails************');
        },

resetRefreshTimer: function(componet, helper){

mytimer = window.setInterval(
            $A.getCallback(function() {
                helper.getDetails(component, helper);
            }),
            30000
        );

    },

 getUpdate: function(component, helper) {
if(isButtonClicked = true) {
window.clearInterval(mytimer);
       } else {
helper.resetRefreshTimer(component, helper);

}
        },

but it is not working. is my approach correct?

Answer 1

You need to set the value on an object. Here's a self-contained example. Note: setting a value on helper will apply to any and all copies of the component that are in memory. If you need to store the timer on a per-component basis, you need to use an aura:attribute, instead.

app

<aura:application >
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>
    <aura:attribute name="value" type="Integer" default="{!0}" />
    <aura:attribute name="active" type="Boolean" default="{!false}" />
    <br/>
    Counter: {!v.value}
    <br/>
    Active: {!v.active}
</aura:application>

---

controller.js

({
    toggle: function(component, event, helper) {
        helper.toggle(component);
    }
})

---

helper.js

({
    toggle: function(component) {
        if(this.timerId) {
            clearInterval(this.timerId);
            this.timerId = null;
        } else {
            this.timerId = setInterval($A.getCallback(this.next.bind(this, component)), 1000);
        }
        component.set("v.active", !!this.timerId);
    },
    next: function(component) {
        var value = component.get("v.value");
        value = value + 1;
        component.set("v.value", value);
    }
})