複数のオブジェクトのjQuery（）。done（）

Question

プログレスバーに問題があります。 次の各関数を読み込んだ後にプログレスバーを変更したいと思います。 これは私のコードです：

var tick=1; 
var count=10; 
function example(){ 
    $('#progress div').css('width',(tick*count)+'%'); 
    tick++; 
} 
$.when($.getJSON("data1.json",function(_a){data1=_a;})).done(function(){ 
    example(); 
    $.when(someLoadFunction).done(function(){ 
    example(); 
    $.when(someLoadFunction2).done(function(){ 
     example(); 
     //7 more... 
    }); 
    }); 
}); 

それは簡単に将来的に拡張することができるように、スクリプトを簡素化する方法について説明します。

Answer 1

呼び出す関数の配列を作成し、それらの関数をループします。 jQueryユーザーではないので、これを行うためのより効率的な方法があるかもしれませんが、少なくともこれはかなり維持可能です。または@Aとして。ウォルフは示唆している...連鎖を使う。

N.B.関数ごとに異なるコールバックを使用する場合は、代わりに関数/コールバックを持つ関数にオブジェクトリテラルを渡します（この場合はコールバックパラメータは必要ありません）。

$.when($.getJSON("data1.json", function(_a) { 
    data1 = _a; 
})).done(function() { 
    var functionArr = []; //array of functions 
    loopWhen(functionArr, example()); 
}); 


function loopWhen(functionArr, callback) { 
    (var i = 0; i < functionArr.length; i++) { 
    $.when(functionArr[i]).done() { 
     callback(); 
    }; 
    }; 
}; 

Answer 2

あなたは.queue()、.promise()、.then()を使用することができます。関数を配列に格納し、現在の関数の約束が解決されたときに配列のnext関数を順番に呼び出します。 jQueryの約束のオブジェクトを返しますし、とにかくあなたがそれに一つだけの約束をpssingされているので.then()

var tick = 0; 
 
var count = 10; 
 
var url = "https://gist.githubusercontent.com/" 
 
      + "guest271314/23e61e522a14d45a35e1/" 
 
      + "raw/a5ac6cffdc1ffab39f9db425844721b528751654/a.json"; 
 
// handle errors 
 
function err(e) { 
 
    console.log(e) 
 
} 
 

 
function example(data) { 
 
    // do stuff 
 
    console.log(data); 
 
    $("#result").append(data + "<br><br>"); 
 
    // return `.promise()` 
 
    return $("#progress div") 
 
     .css("width", (++tick * count) + "%") 
 
     .promise() 
 
} 
 

 
function progress(fn, next) { 
 
    return fn().then(example).then(next).fail(err) 
 
} 
 
// e.g., `someLoadFunction`, `someLoadFunction2`.. 
 
function someFunction() { 
 
    return $.Deferred(function(dfd) { 
 
    return dfd.resolve(tick) 
 
    }) 
 
} 
 
// e.g., `$.getJSON()`, `someLoadFunction`, `someLoadFunction2`.. 
 
var arr = [ 
 
    function() {return $.getJSON(url)} 
 
    , someFunction, someFunction, someFunction // `someLoadFunction2`.. 
 
    , someFunction, someFunction, someFunction // `someLoadFunction5`.. 
 
    , someFunction, someFunction, someFunction // `someLoadFunction8`.. 
 
]; 
 

 
$({}).queue("progress", $.map(arr, function(deferred) { 
 
    return $.proxy(progress, null, deferred) 
 
})).dequeue("progress").promise("progress") 
 
.then(function() {console.log("complete")});

#progress div { 
 
    background: blue; 
 
    width: 0px; 
 
    height: 20px; 
 
    border: 2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="progress"> 
 
    <div></div> 
 
</div> 
 
<div id="result"></div>