Passing argument to anonymous function

Question

want to pass a simple integer to function after finding it. Code is as below:

$("#play").click(function() {
    var elementNumber;
    var properElement;
    for (var i = 0; i < playlistLength; i++) {
        if (listOfElements[i].type == 'video' && listOfElements[i].position == 0) {
            elementNumber = i;
        }
    };
    document.getElementById(listOfElements[elementNumber].name).play();
    properElement = listOfElements[elementNumber];
    console.log(properElement); // gives out proper element;
    setInterval("galleryElement.draw(properElement.name, properElement.type, properElement.position)", 33); // Cannot read property 'name' of undefined 
    return false;
})​

and I get an error Cannot read property "name" of undefined? How can I pass arguments there?

Thanks in advance!

Answer 1

$("#play").click(function() {
    var elementNumber;
    var properElement;
    for (var i = 0; i < playlistLength; i++) {
        if (listOfElements[i].type == 'video' && listOfElements[i].position == 0) {
            elementNumber = i;
        }
    };
    document.getElementById(listOfElements[elementNumber].name).play();
    properElement = listOfElements[elementNumber];
    console.log(properElement); // gives out proper element;
    setInterval(function() {
        galleryElement.draw(properElement.name, properElement.type, properElement.position)
    }, 33);
    return false;
})

or (won't work in IE)

$("#play").click(function() {
    var elementNumber;
    var properElement;
    for (var i = 0; i < playlistLength; i++) {
        if (listOfElements[i].type == 'video' && listOfElements[i].position == 0) {
            elementNumber = i;
        }
    };
    document.getElementById(listOfElements[elementNumber].name).play();
    properElement = listOfElements[elementNumber];
    console.log(properElement); // gives out proper element;
    setInterval(galleryElement.draw, 33, properElement.name, properElement.type, properElement.position);
    return false;
})

Answer 2

try

setInterval(function(){
  galleryElement.draw(properElement.name, properElement.type, properElement.position)
}, 33);

You need to put properElement in the scope of the function to be executed.

Answer 3

If you pass a string to setInterval() you will lose scope of your properElement. You have to pass the functioncall directly (without quotes):

setInterval(function(){
  galleryElement.draw(properElement.name, properElement.type, properElement.position)
}, 33);

In general it is not recommended to pass a string to setInterval/Timeout because it needs to be evaluated via eval. Always pass a function or a reference to a function.