1unitedpower: caught exception: out of memory

Beitrag lesen

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)