jQuery 여러 객체에서 when(). done()

진행률 표시 줄에 문제가 있습니다. 각 다음 함수를로드 한 후 progressbar를 변경하려고합니다. 쉽게 미래에 확장 할 수 있도록 jQuery 여러 객체에서 when(). done()

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... 
    }); 
    }); 
});

방법, 스크립트를 단순화하기 : 이 내 코드입니다.

출처

2016-10-14 Latreso

먼저 단순화에 함수의 매개 변수로 example를 사용하는 것은'이 $ .when'를 사용하지 않는 것입니다 어쨌든 당신이 그것을 하나의 약속을 pssing 때문에 각 시간 그래서 예 :'$ .when (someLoadFunction) .done (function() {...});'someLoadFunction(). done (function() {...});'과 동일합니다. 이제 너는이 모든 raquests를 평행선으로 달리게 할 수 있겠지? –

호출 할 함수의 배열을 만든 다음 해당 함수를 반복합니다. 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(); 
    }; 
    }; 
};

출처

2016-10-14 09:58:42

꽤 괜찮은 @ A.Wolff :-) 만약 내가 솔직히 말하면, 나는이 해결책을 좋아하지 않는다. ... 너무 좋아서 좋아하지 않는다. –

당신은 .queue(), .promise(), .then()를 사용할 수 있습니다. 함수를 배열에 저장하고, 현재 함수 약속이 해결 될 때 배열에서 next 함수를 순차적으로 호출합니다. 에서 jQuery를 약속 개체를 반환하고 .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>

출처

2016-10-14 10:41:54 guest271314

jQuery 여러 객체에서 when(). done()

답변

관련 문제