0

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?

0

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);
    }
})
2
  • where did you declare timerId varaible? is there any way to declare a global variable without initializing any value in salesforce JS? ex: instead of like this, mytimer : null, – Arzad Mar 24 '20 at 5:13
  • 1
    @Arzad I did not declare it, as there is no need to do so. this.mytimer = null or window.mytimer = null is sufficient to create the variable without a value (it'll be null). There's no need to declare it as a part of your helper, as in mytimer: null. – sfdcfox Mar 24 '20 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.