# clearInterval when msg.payload changes

**URL:** <https://discourse.nodered.org/t/clearinterval-when-msg-payload-changes/505>\
**Category:** Dashboard\
**Created:** [31 May 2018 14:09 UTC](https://discourse.nodered.org/t/clearinterval-when-msg-payload-changes/505 "2018-05-31T14:09:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grendel61](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grendel61/32/75_2.png) [@Grendel61](https://discourse.nodered.org/u/Grendel61)\
**Post date:** [31 May 2018 14:09 UTC](https://discourse.nodered.org/t/clearinterval-when-msg-payload-changes/505/1 "2018-05-31T14:09:12Z")

</div>

I’ve been building an AngularJS component that creates a table of items that are passed to it through msg.payload and are clickable using the scope.$watch and pass a value out through msg.payload. One part is a countdown clock related to the item in each row.

The component generally works, but if I cause a change in the data, the setInterval creates a second interval without clearing the first, and I end up with 2 countdown clocks on the same row, one on top of the other.

Obviously I need a clearInterval, but what’s happening is that the $scope.$watch is waiting for a msg.payload, and it calls this countdown clock function. It seems like the logical place to put the clearInterval is in the $scope.$watch after it has figured out it has new data. The $scope.$watch function calls the countdown clock function.

Any thoughts on when/how I can call this clearInterval.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 May 2018 15:26 UTC](https://discourse.nodered.org/t/clearinterval-when-msg-payload-changes/505/2 "2018-05-31T15:26:22Z")

</div>

Hi  
You may get some ideas from what I did  
[https://flows.nodered.org/flow/1f34a9536c37c68dd836d7e6ef9df533](https://flows.nodered.org/flow/1f34a9536c37c68dd836d7e6ef9df533)

---

<div class="post-metadata">

**Author:** ![Grendel61](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grendel61/32/75_2.png) [@Grendel61](https://discourse.nodered.org/u/Grendel61)\
**Post date:** [1 June 2018 18:49 UTC](https://discourse.nodered.org/t/clearinterval-when-msg-payload-changes/505/3 "2018-06-01T18:49:21Z")

</div>

Answered my own question. I needed to move the setInterval function from the countdown function into the $scope.$watch. Then I needed to clearInterval before I set it. In this way, when new data comes in to drive the countdown, it will clear out the old interval.

Final code.

```
(async function($scope) {
    let setIntervalId = 0 // first time
    $scope.$watch('msg.payload', async function(payload,oldpayload) {
        clearInterval(setIntervalId) // new data clear
        if (payload != oldpayload) {
            setIntervalId = setInterval( function(){
                genCountDown(payload)
            },1000)
        }
        await new Promise((resolve, reject) => setTimeout(resolve, 3000))
    })
    await new Promise((resolve, reject) => setTimeout(resolve, 3000))
})(scope)
```