>웹 프론트엔드 >JS 튜토리얼 >여러 Ajax 요청의 실행 및 반환 순서 문제에 대한 예제 토론

여러 Ajax 요청의 실행 및 반환 순서 문제에 대한 예제 토론

韦小宝
韦小宝원래의
2017-12-31 10:15:111813검색

이 글에서는 주로 여러 Ajax 요청의 실행 및 반환 순서 문제에 대해 설명합니다. ajax에 관심이 있는 친구는 여러 Ajax 요청의 실행 및 반환 순서에 대한 예제 토론에 대한 글을 참조할 수 있습니다. Ajax 요청

때때로 비즈니스 이벤트 처리 프로세스에서 버튼이 클릭되거나 작업을 트리거하는 다른 이벤트가 발생할 수 있습니다.

두 개 이상의 Ajax 요청을 실행해야 하지만 요청 순서에 대해 걱정해야 할 수도 있습니다. Ajax 요청이 실행되는 경우도 있습니다. Ajax 요청 순서에 문제가 있어 다양한 문제가 발생할 수 있습니다.

예를 들어 ajax1과 ajax2라는 두 개의 ajax 이벤트가 있습니다

main

1이라는 메서드 호출 실행 항목이 있습니다.

위 방법을 따르면 ajax1이 먼저 실행되고 ajax2가 나중에 실행되는 것 같습니다. 잘 생각하지 않으면 ajax1이 먼저 실행되고 그 다음에 ajax2가 실행된다고 생각하는 분들도 있을 겁니다.


꼭 정답은 아닙니다. 물론, 실행 및 반환 순서가 필요하지 않은 ajax 요청이 여러 개 있는 상황에서는 누가 먼저 실행하고 누가 먼저 반환하는지에 대해 너무 많이 생각할 필요는 없습니다

의 실행 순서와 반환 순서를 고려하면 어떻게 될까요? ajax 이벤트


이런 경우 어떻게 해결하나요? ajax 이벤트의 실행 반환 순서는 무엇인가요?

물론 이제 ajax
콜백 함수
를 생각해야 합니다. 좋습니다. 이 아이디어에 따른 방법은 다음과 같습니다




function main(){
ajax1(data,callback);
ajax2(data,callback);
}



이렇게 보면 정말 좋은 것 같지 않나요? 정말? 정말 아주 좋은가요?

아마도, 하지만 경우에 따라서는 이렇게 작성하는 것이 불편할 수도 있습니다. 물론 접하지 못할 수도 있지만 저는 다소 특별한 상황에 직면했습니다
예를 들어 다음과 같은 가능성



function main(){
ajax1( data , ajax2( ) );
}




이 상황이 ajax2를 먼저 실행하고 먼저 완료하도록 만족시킬 수 있다고 생각하시나요?

잘 생각해보면 답을 찾을 수 있을 것입니다

아니요!

이제 이 문제를 해결하는 방법입니다. ajax2가 ajax1보다 먼저 완료되었는지 확인하는 방법입니다.

물론 이것이 간단하지 않다고 말할 수도 있습니다. ajax2 메서드 콜백 메서드 ajax2Callback


끝에 ajax1 호출을 넣습니다. 인정하기에는 이것이 해결책이지만 아주 오래된 프로젝트라면 몇 년 동안 진행된 프로젝트입니다. 내부 호출이 복잡하므로 이전 기본 메서드를 수정하지 않도록 해야 합니다. 어쩌면 이 버그를 수정하려면 이렇게 간단히 해결하면 여러 버그가 발생할 수도 있습니다.

그러면 좋은 해결 방법이 없을까요? 그것?

물론, 쉽게 해결하세요. 하지만 업무 경험이 부족한 사람들은 한번에 생각해내는 경우가 거의 없으며, 무슨 일이 있어도 이전 방법을 사용하여 성급하게 문제를 해결합니다.

그리고 비교적 어리석은 방법을 채택했는데 여전히 문제가 있습니다. setTimeOut
Timer
을 사용하여 한 번 실행했지만 이 Ajax가 얼마나 오랫동안 실행되는지는 누구나 알 것입니다. 그만하세요,
배열
을 정렬하는 것을 기억하시나요? 이것에 대해 이야기하면 이것이 배열 정렬과 어떤 관련이 있는지 궁금할 것입니다. 답은 아래에 있습니다

코드가 모든 것을 설명합니다:


function main(){
aa(data);
ajax1(data,callback);
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的
ajax2(data,ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback()执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}


보세요, 아주 흥미롭지 않나요? 가장 낮은 수준의 메소드는 수정되지 않고, 메인 메소드만 수정됩니다. 배열 정렬과 매우 유사합니까?
버블 정렬

을 사용하든 퀵 정렬을 사용하든 두 값의 크기를 비교할 때 값을 저장하도록 임시 변수가 설정됩니다. 물론 크기를 정렬하고 비교할 때 임시 변수를 설정할 필요는 없으며 ^

연산자
를 사용하여 크기를 할당하거나 시스템의 Arrays.sort() 메서드를 직접 호출할 만큼 게으른 경우도 있습니다. . 물론 괜찮습니다

function main(){
var temp=ajax2Callback;
ajax2Callback=function(){
temp();
ajax1(data,callback);
}
aa(data);
ajax2Callback=temp; 
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的
ajax2(data,ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback()执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}

이 글의 내용은 여기까지입니다. 모든 분들께 도움이 되었으면 좋겠습니다! !

관련 권장사항:
AJax는 Baidu 검색창과 유사한 기능을 구현합니다.

ajax 시리즈의 첫 번째 부분에서 XHR 개체에 대한 심층적인 이해

Ajax 상호 작용을 위한 JSON 데이터 저장 형식 유저들과 함께

위 내용은 여러 Ajax 요청의 실행 및 반환 순서 문제에 대한 예제 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.