programing

jQuery Delayed 배열을 사용하는 방법은 무엇입니까?

megabox 2023. 8. 12. 10:10
반응형

jQuery Delayed 배열을 사용하는 방법은 무엇입니까?

특정 순서로 데이터를 로드해야 하는 애플리케이션이 있습니다. 루트 URL, 스키마, 마지막으로 다양한 데이터 개체에 대한 스키마와 URL을 사용하여 애플리케이션을 초기화합니다.사용자가 응용프로그램을 탐색할 때 데이터 개체가 로드되고 스키마에 대해 유효성이 검사되고 표시됩니다.사용자가 데이터를 CRUD할 때 스키마는 1차 통과 유효성 검사를 제공합니다.

초기화에 문제가 있습니다.Ajax 호출을 사용하여 루트 개체 $.when()을 가져온 다음 각 스키마 개체에 대해 하나씩 약속 배열을 만듭니다.효과가 있습니다.콘솔에 가져오기가 표시됩니다.

그런 다음 모든 스키마에 대한 가져오기를 확인하여 각 $.ajax() 호출이 작동합니다.fetchchemas()는 실제로 일련의 약속을 반환합니다.

그러나 () 절이 실행되지 않고 "DONE"이라는 단어가 콘솔에 나타나지 않는 경우의 최종 결과입니다.jquery-1.5의 소스 코드는 $.when.apply()에 전달할 개체로 "null"을 사용할 수 있음을 의미하는 것으로 보이며, 이는 () 개체가 전달되지 않을 경우 목록을 관리하기 위해 내부 지연() 개체를 빌드할 때와 같습니다.

이것은 Futures.js를 사용하여 작동했습니다.이런 경우가 아니라면 jQuery 지연 배열을 어떻게 관리해야 합니까?

    var fetch_schemas, fetch_root;

    fetch_schemas = function(schema_urls) {
        var fetch_one = function(url) {
            return $.ajax({
                url: url,
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        };

        return $.map(schema_urls, fetch_one);
    };

    fetch_root = function() {
        return $.ajax({
            url: BASE_URL,
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
    };

    $.when(fetch_root()).then(function(data) {
        var promises = fetch_schemas(data.schema_urls);
        $.when.apply(null, promises).then(function(schemas) {
            console.log("DONE", this, schemas);
        });
    });

찾으시는 제품

$.when.apply($, promises).then(function(schemas) {
     console.log("DONE", this, schemas);
}, function(e) {
     console.log("My ajax failed");
});

이것은 또한 작동할 것입니다(일부 작업 가치에 대해서는 고장난 Ajax를 해결하지 못합니다).

$.when.apply($, promises).done(function() { ... }).fail(function() { ... });` 

합격하고 싶을 겁니다$대신에null하도록this안에서.$.when에 대한jQuery출처는 중요하지 않지만 통과하는 것보다 낫습니다.null.

$.ajax를 모두 다음으로 대체하여 조롱했습니다.$.when그리고 샘플은 작동합니다.

따라서 Ajax 요청의 문제이거나 fetch_schemas로 전달하는 배열의 문제입니다.

위의 해결 방법(고맙습니다!)이 지연된 고객에게 제공된 개체를 다시 가져오는 문제를 제대로 해결하지 못합니다.resolve()jQuery가 호출하기 때문에 메서드done()그리고.fail()배열이 아닌 개별 매개 변수를 사용하여 콜백합니다.그 말은 우리가 그것을 사용해야 한다는 것을 의미합니다.arguments지연된 배열(추측한)에 의해 해결되거나 지연된 모든 개체를 반환하는 유사 배열:

$.when.apply($, promises).then(function() {
     var schemas=arguments; // The array of resolved objects as a pseudo-array
     ...
};

우리가 일련의 지연을 통과했기 때문에, 일련의 결과를 돌려받는 것이 좋을 것입니다.또한 유사 배열 대신 실제 배열을 가져와 다음과 같은 방법을 사용할 수 있습니다.Array.sort().

다음은 when.js에서 영감을 얻은 솔루션입니다.when.all()다음 문제를 해결하는 방법:

// Put somewhere in your scripting environment
if (jQuery.when.all===undefined) {
    jQuery.when.all = function(deferreds) {
        var deferred = new jQuery.Deferred();
        $.when.apply(jQuery, deferreds).then(
            function() {
                deferred.resolve(Array.prototype.slice.call(arguments));
            },
            function() {
                deferred.fail(Array.prototype.slice.call(arguments));
            });

        return deferred;
    }
}

이제 다음과 같이 지연/약속 배열을 전달하고 콜백에서 해결/거부된 개체 배열을 반환할 수 있습니다.

$.when.all(promises).then(function(schemas) {
     console.log("DONE", this, schemas); // 'schemas' is now an array
}, function(e) {
     console.log("My ajax failed");
});

ES6 버전의 Javascript를 사용하는 경우 객체 배열을 쉼표로 구분된 인수로 변환하는 스프레드 연산자(...)가 있습니다.

$.when(...promises).then(function() {
 var schemas=arguments; 
};

ES6 스프레드 운영자에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator 에서 확인할 수 있습니다.

다음 코드를 사용할 때 확장됩니다.

var rawWhen = $.when
$.when = function(promise) {
    if ($.isArray(promise)) {
        var dfd = new jQuery.Deferred()
        rawWhen.apply($, promise).done(function() {
            dfd.resolve(Array.prototype.slice.call(arguments))
        }).fail(function() {
            dfd.reject(Array.prototype.slice.call(arguments))
        })
        return dfd.promise()
    } else {
        return rawWhen.apply($, arguments)
    }
}

언급URL : https://stackoverflow.com/questions/4878887/how-do-you-work-with-an-array-of-jquery-deferreds

반응형