연기 jQuery를 어떻게 사용할 수 있습니까?

해결법

1.내가 생각할 수있는 최선의 사용 사례는 AJAX 응답을 캐시입니다. 여기에 주제에 레베카 머피의 소개 글에서 변형 예는 다음과 같습니다

내가 생각할 수있는 최선의 사용 사례는 AJAX 응답을 캐시입니다. 여기에 주제에 레베카 머피의 소개 글에서 변형 예는 다음과 같습니다
```
var cache = {};

function getData( val ){

    // return either the cached value or jqXHR object wrapped Promise
    return $.when(
        cache[ val ] || 
        $.ajax('/foo/', {
            data: { value: val },
            dataType: 'json',
            success: function( resp ){
                cache[ val ] = resp;
            }
        })
    );
}

getData('foo').then(function(resp){
    // do something with the response, which may
    // or may not have been retrieved using an
    // XHR request.
});
```
기본적으로,이 값은 이미 캐시에서 즉시 반환되기 전에 한번 요청 된 경우. 그렇지 않으면, AJAX 요청은 데이터를 가져 와서 캐시에 추가합니다. $ .when / 그 때는이 어떤 상관하지 않는다; 모든 당신은 두 경우 모두에서 그 때는 () 핸들러에 전달되는 응답을 사용에 대해 우려 할 필요가있다. jQuery.when ()는 즉시 그 때는 모든 체인되는 .done () 또는 ()를 실행하여 작성한 하나로 지연된 비를 약속 / 처리한다.

Deferreds 때 작업이 5 월 완벽한 또는 비동기 적으로 작동하지 않을 수 있습니다, 당신은 추상적에 코드 중 해당 조건합니다.

$ .when 도우미를 사용하여 또 다른 현실 세계의 예 :
```
$.when($.getJSON('/some/data/'), $.get('template.tpl')).then(function (data, tmpl) {

    $(tmpl) // create a jQuery object out of the template
    .tmpl(data) // compile it
    .appendTo("#target"); // insert it into the DOM

});
```

2.여기 ehynd의 대답과 같은 AJAX 캐시의 약간 다른 구현이다.

여기 ehynd의 대답과 같은 AJAX 캐시의 약간 다른 구현이다.

fortuneRice의 후속 질문에서 언급 한 바와 같이 그 중 하나가 반환되기 전에 요청이 수행 된 경우, ehynd의 구현은 실제로 여러 개의 동일한 요청을 방지하지 않았다. 그건,

for (var i=0; i<3; i++) {
    getData("xxx");
}

"XXX"에 대한 결과는 이미 이전에 캐시되지 않은 경우 3 개 AJAX 요청에 대부분 발생합니다.

이것은 결과 대신 요청의 Deferreds를 캐싱함으로써 해결 될 수있다 :

var cache = {};

function getData( val ){

    // Return a promise from the cache (if available)
    // or create a new one (a jqXHR object) and store it in the cache.
    var promise = cache[val];
    if (!promise) {
        promise = $.ajax('/foo/', {
            data: { value: val },
            dataType: 'json'
        });
        cache[val] = promise;
    }
    return promise;
}

$.when(getData('foo')).then(function(resp){
    // do something with the response, which may
    // or may not have been retreived using an
    // XHR request.
});

3.이연 A는 뮤텍스 대신 사용할 수 있습니다. 이것은 본질적으로 여러 아약스 사용 시나리오와 동일합니다.

이연 A는 뮤텍스 대신 사용할 수 있습니다. 이것은 본질적으로 여러 아약스 사용 시나리오와 동일합니다.

MUTEX
```
var mutex = 2;

setTimeout(function() {
 callback();
}, 800);

setTimeout(function() {
 callback();
}, 500);

function callback() {
 if (--mutex === 0) {
  //run code
 }
}
```
DEFERRED
```
function timeout(x) {
 var dfd = jQuery.Deferred();
 setTimeout(function() {
  dfd.resolve();
 }, x);
 return dfd.promise();
}

jQuery.when(
timeout(800), timeout(500)).done(function() {
 // run code
});
```
A A 뮤텍스로 이연 사용하는 경우에만 성능에 미치는 영향에 대한 조심 (http://jsperf.com/deferred-vs-mutex/2). 이연가 제공하는 편리함뿐만 아니라 추가적인 이점을 잘 가치, 실제 (사용자 중심의 이벤트 기반) 사용에 있지만 성능에 미치는 영향은 눈에 띄지 않을 것이다.
4.이것은 자기 홍보 대답이지만, 나는이 연구 몇 개월 동안 및 jQuery를 회의 샌프란시스코 2012 결과를 발표했다.

이것은 자기 홍보 대답이지만, 나는이 연구 몇 개월 동안 및 jQuery를 회의 샌프란시스코 2012 결과를 발표했다.

여기에 이야기의 무료 동영상입니다 :

https://www.youtube.com/watch?v=juRtEEsHI9E
5.내가 좋은 목적에 넣어 봤는데 또 다른 사용은 여러 소스에서 가져 오는 데이터입니다. 아래의 예에서, 나는 페치 다중, 독립적 인 JSON 스키마는 클라이언트와 REST 서버 간의 검증을 위해 기존 응용 프로그램에 사용되는 객체입니다. 이 경우, 나는 그것이로드 된 모든 스키마를하기 전에 데이터를로드를 시작하는 브라우저 측 응용 프로그램을 원하지 않는다. .when.apply $ (). 한 다음 ()이 최적입니다. 오류 조건을 모니터링 한 후 (을 Fn1, Fn2를)를 사용하는 방법에 대한 포인터 Raynos에 감사드립니다.

내가 좋은 목적에 넣어 봤는데 또 다른 사용은 여러 소스에서 가져 오는 데이터입니다. 아래의 예에서, 나는 페치 다중, 독립적 인 JSON 스키마는 클라이언트와 REST 서버 간의 검증을 위해 기존 응용 프로그램에 사용되는 객체입니다. 이 경우, 나는 그것이로드 된 모든 스키마를하기 전에 데이터를로드를 시작하는 브라우저 측 응용 프로그램을 원하지 않는다. .when.apply $ (). 한 다음 ()이 최적입니다. 오류 조건을 모니터링 한 후 (을 Fn1, Fn2를)를 사용하는 방법에 대한 포인터 Raynos에 감사드립니다.
```
fetch_sources = 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);
}

var promises = fetch_sources(data['schemas']);
$.when.apply(null, promises).then(

function () {
    var schemas = $.map(arguments, function (a) {
        return a[0]
    });
    start_application(schemas);
}, function () {
    console.log("FAIL", this, arguments);
});     
```

6.계산의 모든 종류의 (일반적으로 몇 가지 성능 집약적 또는 작업을 장기 실행)에 대한 캐시를 구현하는 Deferreds를 사용하여 또 다른 예 :

계산의 모든 종류의 (일반적으로 몇 가지 성능 집약적 또는 작업을 장기 실행)에 대한 캐시를 구현하는 Deferreds를 사용하여 또 다른 예 :

var ResultsCache = function(computationFunction, cacheKeyGenerator) {
    this._cache = {};
    this._computationFunction = computationFunction;
    if (cacheKeyGenerator)
        this._cacheKeyGenerator = cacheKeyGenerator;
};

ResultsCache.prototype.compute = function() {
    // try to retrieve computation from cache
    var cacheKey = this._cacheKeyGenerator.apply(this, arguments);
    var promise = this._cache[cacheKey];

    // if not yet cached: start computation and store promise in cache 
    if (!promise) {
        var deferred = $.Deferred();
        promise = deferred.promise();
        this._cache[cacheKey] = promise;

        // perform the computation
        var args = Array.prototype.slice.call(arguments);
        args.push(deferred.resolve);
        this._computationFunction.apply(null, args);
    }

    return promise;
};

// Default cache key generator (works with Booleans, Strings, Numbers and Dates)
// You will need to create your own key generator if you work with Arrays etc.
ResultsCache.prototype._cacheKeyGenerator = function(args) {
    return Array.prototype.slice.call(arguments).join("|");
};

몇 가지 (시뮬레이션 무거운) 계산을 수행하기 위해 클래스를 사용하는 예이다 :

// The addingMachine will add two numbers
var addingMachine = new ResultsCache(function(a, b, resultHandler) {
    console.log("Performing computation: adding " + a + " and " + b);
    // simulate rather long calculation time by using a 1s timeout
    setTimeout(function() {
        var result = a + b;
        resultHandler(result);
    }, 1000);
});

addingMachine.compute(2, 4).then(function(result) {
    console.log("result: " + result);
});

addingMachine.compute(1, 1).then(function(result) {
    console.log("result: " + result);
});

// cached result will be used
addingMachine.compute(2, 4).then(function(result) {
    console.log("result: " + result);
});

같은 기본 캐시는 Ajax 요청을 캐시하는 데 사용할 수 있습니다 :

var ajaxCache = new ResultsCache(function(id, resultHandler) {
    console.log("Performing Ajax request for id '" + id + "'");
    $.getJSON('http://jsfiddle.net/echo/jsonp/?callback=?', {value: id}, function(data) {
        resultHandler(data.value);
    });
});

ajaxCache.compute("anID").then(function(result) {
    console.log("result: " + result);
});

ajaxCache.compute("anotherID").then(function(result) {
    console.log("result: " + result);
});

// cached result will be used
ajaxCache.compute("anID").then(function(result) {
    console.log("result: " + result);
});

이 jsFiddle에서 위의 코드와 함께 재생할 수 있습니다.

7.1) 콜백의 순서 실행을 보장하기 위해 그것을 사용 :

1) 콜백의 순서 실행을 보장하기 위해 그것을 사용 :

var step1 = new Deferred();
var step2 = new Deferred().done(function() { return step1 });
var step3 = new Deferred().done(function() { return step2 });

step1.done(function() { alert("Step 1") });
step2.done(function() { alert("Step 2") });
step3.done(function() { alert("All done") });
//now the 3 alerts will also be fired in order of 1,2,3
//no matter which Deferred gets resolved first.

step2.resolve();
step3.resolve();
step1.resolve();

2) 응용 프로그램의 상태를 확인하는 데 사용합니다 :

var loggedIn = logUserInNow(); //deferred
var databaseReady = openDatabaseNow(); //deferred

jQuery.when(loggedIn, databaseReady).then(function() {
  //do something
});

8.당신은 웹킷 브라우저에서 잘 작동 유체 디자인을 만들기 위해 연기 객체를 사용할 수 있습니다. 웹킷 브라우저는 각각의 크기 조정 한 번만 이벤트가 발생 FF와 IE는 달리 창 크기를 조정 각 픽셀에 대한 크기 조정 이벤트가 발생합니다. 그 결과로, 당신은 당신의 창 크기 조정 이벤트에 바인딩 기능이 실행되는 순서를 제어 할 수 없습니다. 이런 식으로 뭔가 문제를 해결한다 :

당신은 웹킷 브라우저에서 잘 작동 유체 디자인을 만들기 위해 연기 객체를 사용할 수 있습니다. 웹킷 브라우저는 각각의 크기 조정 한 번만 이벤트가 발생 FF와 IE는 달리 창 크기를 조정 각 픽셀에 대한 크기 조정 이벤트가 발생합니다. 그 결과로, 당신은 당신의 창 크기 조정 이벤트에 바인딩 기능이 실행되는 순서를 제어 할 수 없습니다. 이런 식으로 뭔가 문제를 해결한다 :
```
var resizeQueue = new $.Deferred(); //new is optional but it sure is descriptive
resizeQueue.resolve();

function resizeAlgorithm() {
//some resize code here
}

$(window).resize(function() {
    resizeQueue.done(resizeAlgorithm);
});
```
당신이 그것을 의도 한대로 자신을 실행이 코드의 실행을 직렬화합니다. 지연 (A)에 콜백으로 객체 메소드를 통과 할 때 함정주의. 이러한 방법은 지연 콜백으로 실행되면, '이'참조 지연된 객체 참조 덮어 것이며 더이상 방법이 속하는 객체를 참조하지 않습니다.
9.또한 JQuery와 사용합니다 어떤 타사 라이브러리와 통합 할 수 있습니다.

또한 JQuery와 사용합니다 어떤 타사 라이브러리와 통합 할 수 있습니다.

하나는 이러한 라이브러리는 실제로 다음 버전에서 이연 지원 것입니다 백본입니다.

10.난 그냥 실제 코드에 이연 사용했습니다. 프로젝트 jQuery를 터미널에서 나는 (그가 그것을 입력하고 Enter 키를 눌러 것처럼) 사용자에 의해 정의 된 호출 명령은, 내가 배열과 API 및 호출 간부에 Deferreds를 추가 한 기능 간부 있습니다. 이 같은 :

난 그냥 실제 코드에 이연 사용했습니다. 프로젝트 jQuery를 터미널에서 나는 (그가 그것을 입력하고 Enter 키를 눌러 것처럼) 사용자에 의해 정의 된 호출 명령은, 내가 배열과 API 및 호출 간부에 Deferreds를 추가 한 기능 간부 있습니다. 이 같은 :

terminal.exec('command').then(function() {
   terminal.echo('command finished');
});

또는

terminal.exec(['command 1', 'command 2', 'command 3']).then(function() {
   terminal.echo('all commands finished');
});

명령 순서대로 호출 사용자 코드에 비동기 코드 및 간부의 필요성을 실행할 수 있습니다. 일시 정지 / 다시 시작 전화의 새로운 API에 나의 첫번째 API를 사용 쌍 나는 그 자동 때 사용자 반환 약속을 호출합니다. 사용자 코드는 사용할 수 있도록

return $.get('/some/url');

또는

var d = new $.Deferred();
setTimeout(function() {
    d.resolve("Hello Deferred"); // resolve value will be echoed
}, 500);
return d.promise();

이 같은 I 코드를 사용합니다 :

exec: function(command, silent, deferred) {
    var d;
    if ($.isArray(command)) {
        return $.when.apply($, $.map(command, function(command) {
            return self.exec(command, silent);
        }));
    }
    // both commands executed here (resume will call Term::exec)
    if (paused) {
        // delay command multiple time
        d = deferred || new $.Deferred();
        dalyed_commands.push([command, silent, d]);
        return d.promise();
    } else {
        // commands may return promise from user code
        // it will resolve exec promise when user promise
        // is resolved
        var ret = commands(command, silent, true, deferred);
        if (!ret) {
            if (deferred) {
                deferred.resolve(self);
                return deferred.promise();
            } else {
                d = new $.Deferred();
                ret = d.promise();
                ret.resolve();
            }
        }
        return ret;
    }
},

dalyed_commands 모든 dalyed_commands 다시 간부를 호출 재개 기능에 사용됩니다.

및 명령 기능의 일부 (난 안 관련 부분을 제거했습니다)

function commands(command, silent, exec, deferred) {

    var position = lines.length-1;
    // Call user interpreter function
    var result = interpreter.interpreter(command, self);
    // user code can return a promise
    if (result != undefined) {
        // new API - auto pause/resume when using promises
        self.pause();
        return $.when(result).then(function(result) {
            // don't echo result if user echo something
            if (result && position === lines.length-1) {
                display_object(result);
            }
            // resolve promise from exec. This will fire
            // code if used terminal::exec('command').then
            if (deferred) {
                deferred.resolve();
            }
            self.resume();
        });
    }
    // this is old API
    // if command call pause - wait until resume
    if (paused) {
        self.bind('resume.command', function() {
            // exec with resume/pause in user code
            if (deferred) {
                deferred.resolve();
            }
            self.unbind('resume.command');
        });
    } else {
        // this should not happen
        if (deferred) {
            deferred.resolve();
        }
    }
}

11.는 응답 데이터를 캐시하기 때문에 ehynds에 의한 대답은 작동하지 않습니다. 그것은 또한 약속입니다 jqXHR를 캐시한다. 여기에 올바른 코드는 다음과 같습니다

는 응답 데이터를 캐시하기 때문에 ehynds에 의한 대답은 작동하지 않습니다. 그것은 또한 약속입니다 jqXHR를 캐시한다. 여기에 올바른 코드는 다음과 같습니다
```
var cache = {};

function getData( val ){

    // return either the cached value or an
    // jqXHR object (which contains a promise)
    return cache[ val ] || $.ajax('/foo/', {
        data: { value: val },
        dataType: 'json',
        success: function(data, textStatus, jqXHR){
            cache[ val ] = jqXHR;
        }
    });
}

getData('foo').then(function(resp){
    // do something with the response, which may
    // or may not have been retreived using an
    // XHR request.
});
```
줄리안 D.에 의한 대답은 올바른 일을하고 더 나은 솔루션입니다.

from https://stackoverflow.com/questions/4869609/how-can-jquery-deferred-be-used by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 부트 스트랩 선행 입력 아약스 예를 트위터 (0)	2020.10.13
[JQUERY] 어떻게 jQuery로 다른 하나의 요소에 상대적인 위치를 하는가? (0)	2020.10.13
[JQUERY] jQuery.ajax () 메소드의 비동기 옵션은 더 이상 사용되지, 지금 무엇? (0)	2020.10.13
[JQUERY] 텍스트 영역에 대한 발 () 대 텍스트 () (0)	2020.10.13
[JQUERY] 루프에서 스플 라이스와 어레이로부터 항목 삭제 [중복] (0)	2020.10.13

복붙노트

[JQUERY] 연기 jQuery를 어떻게 사용할 수 있습니까?

연기 jQuery를 어떻게 사용할 수 있습니까?

해결법

1.내가 생각할 수있는 최선의 사용 사례는 AJAX 응답을 캐시입니다. 여기에 주제에 레베카 머피의 소개 글에서 변형 예는 다음과 같습니다

2.여기 ehynd의 대답과 같은 AJAX 캐시의 약간 다른 구현이다.

3.이연 A는 뮤텍스 대신 사용할 수 있습니다. 이것은 본질적으로 여러 아약스 사용 시나리오와 동일합니다.

4.이것은 자기 홍보 대답이지만, 나는이 연구 몇 개월 동안 및 jQuery를 회의 샌프란시스코 2012 결과를 발표했다.

6.계산의 모든 종류의 (일반적으로 몇 가지 성능 집약적 또는 작업을 장기 실행)에 대한 캐시를 구현하는 Deferreds를 사용하여 또 다른 예 :

7.1) 콜백의 순서 실행을 보장하기 위해 그것을 사용 :

9.또한 JQuery와 사용합니다 어떤 타사 라이브러리와 통합 할 수 있습니다.

11.는 응답 데이터를 캐시하기 때문에 ehynds에 의한 대답은 작동하지 않습니다. 그것은 또한 약속입니다 jqXHR를 캐시한다. 여기에 올바른 코드는 다음과 같습니다

'JQUERY' 카테고리의 다른 글

티스토리툴바