Does anyone understand how to call this function with a 'setInterval' statement?

Question

hi, i wrote this code:
https://code.sololearn.com/WV7zV5LQ4A7f/?ref=app

if i call the f function in this way "obj.f();" it gives me no error, but if i call it with "setInterval" (line 16), console tells me "cannot read property 'length' of undefined".
can you help me please?

Answer 1

You have at least 2 mistakes, maybe 3:

+ calling setInterval() kind of asynchronious functions will result in losing context... so when you obj.f() function run, 'this' object is no more assigned with the object on wich the call happened, but it's now a reference to 'window' object (the root object of a document/script, where is the setInterval() function defined), meaning you are in the global variable scope at run time of obj.f() instead of in the object scope ^^

// Fix can be done by passing the object reference as parameter of the obj.f() function:

/*
this.f = function (){
this.count >= this.imgArr.length-1 ? this.count=0 : this.count++;
document.getElementById(this.img).src = this.imgArr[this.count][1];
//.....some other codes
};

this.id = setInterval (this.f, interval);
*/
this.f = function (self){
self.count >= self.imgArr.length-1 ? self.count=0 : self.count++;
document.getElementById(self.img).src = self.imgArr[self.count][1];
//.....some other codes
};
this.id = setInterval (this.f, interval, this);

+ even if you're initializing the first call to setInterval() with a value sufficient to guess that Html document has finish loading when f() will run, you don't ever know what tilme it should require for that, and for DOM being ready to access it with JS, so it's more safe to create your object only when 'window.onload' event is fired:

window.onload = function() {
var obj = new fnObj("img", 1000);
};

+ anyway, your code will now run without raising errors, but nothing happen, probably because your <img> 'src' attribute is refresh with relative urls, which have no chances to work inside code playground ^^... but I guess also that you have published only one extract of your whole code which is not intented to be ran here ;)

Answer 2

Yes, you can pass parameters to the called function through parameters of setInterval(), which define 2 mandatory parameters, and pass rest of received parameters to the timed out function call: so any number of parameters can be send by this way ;)

function f(a,b,c,d) {}

setInterval(f,1000,n,m,o,p);

Answer 3

@visph i started to study js on a guidebook (i'm a self-taught, i study electronic, but i love programming) and they mention the setInterval method but they didn't explain how to pass arguments to the function called, thank you again for explaining it to me

Answer 4

@visph thank you so much! i imagined that the problem was the one you described but i didn't know how to resolve it and i didn't know that was possible to pass parameters to a function through the setInterval in that way
oh yes it's only a little part of a bigger code i wrote on my pc, here i report only the piece of that which didn't work