Hier ist eine übliche Lösung:
Function Fade (elem, array, ms) { // Variable this.elem = elem; // Bild this.array = array; // URLs this.ms = ms; // Milisekunden // Methods this.fading = function () { var count = 0; var that = this; // für den setTimeout-Kontext später var stepping = window.setTimeout(function () { // that != this! that.elem.style.backgroundImage = that.array[count]; // [...] }, this.ms); }; }
Alternativ kann man den this-Kontext von der Callbackfunktion auch an den this-Kontext der äußeren Funktion binden:
var stepping = window.setTimeout(function () {
this.elem.style.backgroundImage = this.array[count];
// [...]
}.bind(this), this.ms);
In der neusten JavaScript-Version gibt es sogar eine verkürzte Funktionsschreibweise, die diesen Schritt obsolet macht:
var stepping = window.setTimeout(() =>
this.elem.style.backgroundImage = this.array[count];
// [...]
}, this.ms);
Eine radikalere Lösung besteht darin, this vollständig zu vermeiden und mit Factories anstatt mit Konstruktoren zu arbeiten:
function createFade (elem, array, ms) {
function fading () {
var count = 0;
var stepping = window.setTimeout(function () {
elem.style.backgroundImage = array[count];
// [...]
}, ms);
}
return { fading }; //ES2015 Syntax, für ES5.1: return { fading : fading }
}
Und nur so zum Spaß noch eine funktionale Variante ohne veränderliche Zustandsvariablen, dafür mit Promises, um den Kontrollfluss zu modellieren:
function reduceWithDelay (fn, array, delay) {
return array.reduce((lastPromise,nextElement) =>
new Promise(resolve =>
lastPromise.then(()=>setTimeout(()=>{
fn(nextElement)
resolve();
}, delay))
), (new Promise(resolve=>resolve())));
}
const animation = reduceWithDelay(color=>document.body.style.backgroundColor=color, ['red','green'], 1000);
animation.then(()=>console.log('Animation fertig'));
http://jsfiddle.net/sftvptzv/ (getestet mit Chrome)