関数を無期限に、好ましくはsetInterval（）を使用せずに繰り返します。

Question

私はスライドショーフレームワークを構築していますが、アニメーション機能を循環させる最善の方法を考え出すのに問題がありました。setInterval()を使用できましたが、リソースを大量に消費することなく繰り返してください。

JAVASCRIPT：

class slideShow { 
    constructor(imgDir, dataList) { 
     this.imgDir = imgDir; 
     this.dataList = dataList; 
     this.settings = 0; 
     this.imgList = 0; 
     this._init(); 
    } 
    _init(){ 
     $.getJSON(`${this.imgDir}/${this.dataList}.json`, (data)=>{ 
      this.settings = data.settings; 
      this.imgList = data.imgList; 
     }) 
    } 
    start(){ 
     for(let img of this.imgList){ 
      $(this.settings.selector).fadeOut(this.settings.fadeTime,()=>{ 
       $(this.settings.selector).attr("src",`${this.imgDir}/${img}`); 
       $(this.settings.selector).fadeIn(this.settings.fadeTime); 
      }); 
     } 
    } 
} 

JSON：

{ 
    "settings":{ 
     "selector":"#slideShow", 
     "fadeTime":1000 
    }, 
    "imgList":[ 
     "slide_01.jpg", 
     "slide_02.jpg", 
     "slide_03.jpg" 
    ] 
} 

Answer 1

は簡単な解決策は、「から疑似再帰的にループしていますアニメーションの最終ステップの「完了コールバック」を選択します。私はfor ... ofループを削除した

start() { 
    var current = 0; 
    (function loop() { 
     let img = imgList[current++]; 
     current %= imgList.length; 
     let $sel = $(this.settings.selector); 
     $sel.fadeOut(this.settings.fadeTime,() => { 
      $sel.attr("src",`${this.imgDir}/${img}`); 
      $sel.fadeIn(this.settings.fadeTime, loop); // <-- here 
     }); 
    })(); 
} 

注 - ここloop機能の各パスは、ちょうどスライドショーの一つのフレームを処理します。

これはあなたのコード内で何もfadeOut, change image, fadeInへの最初のサイクルを可能にしていないので、あなたが（もちろん見えないだろうそのうちの2つ）三つの連続fadeOutアニメーションを取得したいあなたの元のコードのバグ、と思われるものを解決しますfor ... ofループの次の反復が始まる前に完了してください。

Answer 2

あなたは.then()を使用することができ、jQueryの.promise()、再帰

class slideShow { 
    constructor(imgDir, dataList) { 
     this.imgDir = imgDir; 
     this.dataList = dataList; 
     this.settings = 0; 
     this.imgList = 0; 
     this._init(); 
    } 
    _init(){ 
     $.getJSON(`${this.imgDir}/${this.dataList}.json`, (data)=>{ 
      this.settings = data.settings; 
      this.imgList = data.imgList; 
     }).then(this.start) 
    } 
    start(){ 
     for(let img of this.imgList){ 
      $(this.settings.selector).fadeOut(this.settings.fadeTime,()=>{ 
       $(this.settings.selector).attr("src",`${this.imgDir}/${img}`); 
       $(this.settings.selector).fadeIn(this.settings.fadeTime); 
      }); 
     } 
     $(this.settings.selector).promise() 
     .then(() => this.start() /* or this._init() */) 
    } 
}