setInterval function cannot use outer variable

Question

Why is prevColor always undefined?

This code should log a new color (actualColor) and the previous color (prevColor). However I cannot save into prevColor from inside the setInterval function. Where is the bug? I don´t think it is a context problem. But I´m not sure. There´s no this inside...

Can you tell me how I can save the value of actualColor in prevColor from inside the setInterval function?

var actualColor;
var prevColor;


// do some user action and change actualColor


setInterval(function () {
    // only log the color if it differs from prevColor
    if (actualColor != prevColor) {
        console.log("actualColor: " + actualColor + ", prevColor: " + prevColor);
    }
    prevColor = actualColor;
}, 100);

Console:

actualColor: acff06, prevColor: undefined

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Whymarrh, Dec 01 '15 at 22:07
I left this part out in this code snippet. It would have been too long. There is a comment inside the code. — wurstbrotrest, Dec 01 '15 at 22:12
If i set a number to prevColor in line 2 the console will always log this value. But no updated Color — wurstbrotrest, Dec 01 '15 at 22:15
It appears to be working as expected given your code, what behaviour are you wanting? The first interval will log undefined because the value is set after the console.log, and the console won't log again because the values are now equal. — Jesse Kernaghan, Dec 01 '15 at 22:41

score 1 · Accepted Answer · answered Dec 01 '15 at 23:03

I think it must be your context -I made a simple webpage with all the bits you have above, and it works fine -even without setting initial values on the variables:

I placed your code in a script tag in the HEAD, and added

<input
    type="text"
    id="actualColor"
    />
<input
    type="button"
    onclick = "actualColor = document.getElementById('actualColor').value;"
    value = "change colour" />

to provide a way of changing actualColor in the webpage (rather than using the console)

score 0 · Answer 2 · answered Dec 01 '15 at 22:10

You need to initialize the value of the prevColor, otherwise first time it will be undefined

Just do

var actualColor;
var prevColor = "";


// do some user action and change actualColor


setInterval(function () {
    // only log the color if it differs from prevColor
    if (actualColor != prevColor) {
        console.log("actualColor: " + actualColor + ", prevColor: " + prevColor);
    }
    prevColor = actualColor;
}, 100);

setInterval function cannot use outer variable

2 Answers2