jQuery“each ()”함수는 동기식입니까?


131

유효성 검증을 위해이 시나리오를 고려하십시오.

function validateForm (validCallback) {
   $('#first-name').add($('#last-name')).add($('#address')).each(function () {
      // validating fields and adding 'invalid' class to invalid fields.
   });
   // doing validation this way for almost 50 fields (loop over 50 fields)
   if ($('#holder .invalid').length == 0) {
       // submitting data here, only when all fields are validated.
   }
}

이제 내 문제는 루프가 끝나기 전에 if 블록이 실행 된다는 것 입니다. 본문이 validateForm동 기적으로 실행될 것으로 예상 했지만 jQuery each()함수가 비동기 적으로 실행되는 것 같습니다 . 내가 맞아? 왜 이것이 작동하지 않습니까?


2
유효성 검사 코드는 어떻게 생겼습니까? each동 기적이지만 내부 코드는 다음과 같지 않을 수 있습니다.
lonesomeday

1
each자체는 동 기적으로 처리됩니다. 루프 내부에서 자신의 비동기 작업을 시작하고 있습니까?
Jon

3
여기 비슷한 문제 .. 어떻게 해결 했습니까?
sakthig

오래 전에 기억이 안나요. 그러나 나는 그 대답이 도움이되었다는 것을 알고 있습니다. 따라서 유효성 검사 코드에서 비동기 코드 블록을 사용했을 수도 있습니다 (아약스 요청을 사용하여 주소의 유효성을 검사하는 것과 같이).
Saeed Neamati

1
흠 .. 난 내가 지금이 내부의 각 기능을 플래그를 유지하고 검증의 끝에서 그 깃발을 반환하고 .. 내가 생각 작동하지 않는 각 함수 내에서 "반환 false"로하고 있었는데 .. 이런 식으로 해결 ..
sakthig

답변:


158

예, jQuery each메소드는 동기식입니다. 거의 모든 JavaScript는 동기식입니다. AJAX, 타이머 ( setTimeoutsetInterval) 및 HTML5 웹 워커 는 예외 입니다.
문제가 코드의 다른 곳에있을 수 있습니다.


7

jQuery순전히 자바 스크립트 라이브러리입니다. 제외시켰다 ajax, setTimeout그리고 setInterval비동기 적으로 실행 할 수 있습니다 아무것도 없다 JavaScript. 따라서 each동 기적으로 확실히 실행됩니다. each블록 코드 안에 분명히 js 오류가 있습니다 . 콘솔에서 오류를 확인해야합니다.

또는 jQuery 대기열 을 살펴보고 대기열의 모든 기능을 실행할 수 있습니다. 이렇게하면 이전 코드 실행이 완료된 경우에만 대기중인 기능이 실행됩니다.


7
또한 약속이 있습니다 ... 그냥 :)

6

이 질문을하는 또 다른 이유는 .each는 (.each ()) 함수가 false를 반환 할 때 단순히 반복을 중지하고 "false return"정보를 전달하기 위해 추가 변수를 사용해야한다는 것입니다.

var all_ok=true;
$(selector).each(function(){
    if(!validate($(this))){
        all_ok=false; //this tells the outside world something went wrong
        return false; //this breaks the .each iterations, returning early
    }
});
if(!all_ok){
    alert('something went wrong');
}

2

나를 위해 그것은 비동기처럼 작동합니다. 동기화가 작동하는 이유는 다음과 같습니다.

var newArray = [];
$.each( oldArray, function (index, value){
        if($.inArray(value["field"], field) === -1){
            newArray.push(value["field"]);
        }
    }
);

//do something with newArray here doesn't work, newArray is not full yet

$.when.apply($, newArray).then(function() {
    //do something with newArray works!! here is full
});

2

return false.each()기능 만 고리, 여전히 루프가 실행하는 외부의 나머지 코드 나누기. 따라서 플래그를 .each()루프로 설정하고 루프 외부에서 확인하십시오.


1

같은 문제입니다. 그래서 나는 이렇게 고쳤다

var y = jQuery(this).find(".extra_fields");
for(var j in y)
{
    if( typeof  y[j] =='object')
    {
        var check = parseInt(jQuery(y[j]).val());
        if(check==0){
            jQuery(y[j]).addClass('js_warning');
            mes="Bạn vui lòng chọn đầy đủ các thuộc tính cho sản phẩm";
            done=false;
            eDialog.alert(mes);
            return false;
        }
    }

}

1

그게 내가하는 방법

 function getAllEventsIndexFromId(id) {
    var a;
    $.each(allEvents, function(i, val) {
        if (val.id == id) { a=i; }
    });
    return a;
 }

0

나는 같은 문제가 있었다. 내 $ .each는 ajax 호출의 성공 함수 안에있었습니다. 추가하여 내 아약스 호출을 동기식으로 만들었고 async: false작동했습니다.


-9

jQuery.each 메소드는 동 기적으로 반복되지만 특정 순서로 항목을 반복한다고 보장 할 수는 없습니다.


21
아니요, 문서에 나타나는 순서대로 항상 반복됩니다.
Abraham

3
그것은 당신이 반복하는 것에 달려 있습니다. 각각은 배열에서 인덱스 순서 실행을 보장하지만 객체에 대해서는 보장하지 않습니다 (명백해야 함).
Deadron
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.