Make "outer" variables "visible" in setInterval function

Question

in this code:

  update: function(e,d) {
var element = $(this);
var data    = element.data();
var actor   = element.find('.actor');
var value = basicdesign.defaultUpdate( e, d, element, true );
var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );
// value >= threshold
if (value >= on){
    var maxcount = data.count;
    var interval = data.interval;
    var audioWidget = document.getElementById(element.data('id'));
    if (audioWidget.paused == true){
        if (maxcount && interval) {
            var numOfCalls = 0;
            audioWidget.play();
            var intervalID = setInterval(function () {
            audioWidget.play();
            numOfCalls = numOfCalls + 1 ;
            if (numOfCalls == maxcount-1) clearInterval(intervalID);
            if **(value < on)** clearInterval(intervalID);
            }, interval);
        }
        else audioWidget.play();
    }
};
// value < then threshold
if (value < on){
var audioWidget = document.getElementById(element.data('id'));
audioWidget.pause();
};

}

I can't use value and on in the setInterval-function. I now, that maybe the solution is an closure - but how ???

(this is an code-fragment from cometvisu (audio.js), an open source visu)

THX

Answer 1

Looks like it's because value is a variable inside update, and you're trying to use it inside another function (that it hasn't been declared in, so that function doesn't know it exists).

You'd be better off, if you can, declaring the value of "value" outside of the update function.

Alternatively, you can pass "value" as a parameter into the function that is called on setInterval.