자바 스크립트 모듈 나는 기본적으로 메시지를 전송하고 계속하기 위해 응답을 기다려야하는 사용자 정의 JS 모듈 쓴

Question

패턴 및 JQuery와 아약스 대기 문제 :

var manageBooking = (function (jQ) { 

//decalre private variables 
var domain, msgRecieved, msgResponse, validationValue; 
//decalre private functions 
var sendMessage, wait; 

// A private variables 
domain = document.domain; 
msgRecieved = false; 
msgResponse = null; 


wait = function(timeOutStep){ 
    var w; 
    console.log('msgRecieved', msgRecieved); 
    if (msgRecieved === true) { 
     clearTimeout(w); 
     return; 
    } else { 
     console.log('waiting..'); 
     w = setTimeout(wait, timeOutStep, timeOutStep); 
    } 
} 

// A private function to send messages 
sendMessage = function(requestURL, data, type) { 
    console.log(requestURL); 
    console.log(data); 
    console.log(type); 
    //reset vars to defaults 
    msgRecieved = false; 
    msgResponse = null; 
    jQuery.ajax({ 
     url: "http://"+domain+"/_ajax/"+requestURL, 
     dataType: "html", 
     async: true, 
     data: data, 
     type: type, 
     success: function(msg){ 
      console.log(msg); 
      msgResponse = msg; 
      msgRecieved = true; 
     } 
    }); 
    console.log('after ajax call'); 
    wait(500); 
    console.log('after wait'); 
    console.log('msgRecieved', msgRecieved); 
    return; 
}; 
return { 

// A public variable 
errorMsg: "", 
validationName: "", 
bookingID: "", 
output: "", 
// A public function to login 
login: function(enteredBookingID, enteredSurname) { 
    // Call private sendMsg 
    sendMessage("user_login/"+enteredBookingID+"/"+enteredSurname, null, 'GET'); 
    console.log(msgResponse); 
    throw "error"; 
    //check response 
    var patt=/Sorry/i; 
    //test pattern 
    var result=patt.test($.trim(msgResponse)); 
    //if false OK 
    if (result === false) { 
     var split = msgResponse.split('|'); 
     validationName = split[0]; 
     validationValue = split[1]; 
     bookingID = enteredBookingID 
     return true; 
    } 
    //else error 
    errorMsg = msgResponse; 
    return false; 
} 
}; 
})(jQuery); 
manageBooking.login(123,123); 

내가 sendMessage 강요 데 문제를 함수는 ajax가 완료 될 때까지 대기하고 msgRecieved을 true로 설정합니다.

그러나 sendMessage 함수는 wait 함수를 한 번 누른 다음 계속됩니다. 다음과 같은 콘솔 출력 이벤트의 순서를 보여줍니다

GET http://website/_ajax/user_login/123/123 
after ajax call //sendMessage() 
msgRecieved, false //wait() 
waiting.. //wait() 
after wait //sendMessage() 
msgRecieved, false //sendMessage() 
null//login() 
uncaught exception: error //login() 
<p>Sorry, we cannot locate your details. </p> <!-- jQuery Ajax call --> 
msgRecieved, true //wait() 

내가 가진 혼란 스러워요하면 wait 기능이 바로 마지막에 다시 불 것이다 ..

사람이 나에게 점점에 대한 몇 가지 포인터를 제공 할 수 있습니다 이게 효과가 있니?

Answer 1

JavaScript는 비동기식으로 동작합니다. 즉, 은 대기하지 않습니다.. 응답이 success 함수 내에서 도착할 때 당신은 코드를 삽입해야

jQuery.ajax({ 
    url: "http://"+domain+"/_ajax/"+requestURL, 
    dataType: "html", 
    async: true, 
    data: data, 
    type: type, 
    success: function(msg){ 
     console.log(msg); 
     msgResponse = msg; 
     msgRecieved = true; 
    } 
}); 

지금처럼 실행하는 방법 :

이 보이는 코드의 일부가

success : function (msg) { 
    handleMessage(msg); // Or any other manipulation to the received message 
} 

function handleMessage(msg) { 
    // Work with your received message here. 
} 

success은 메시지가 수신되어 메시지가 수신되면 콜백입니다.

다음과 같은 방법이 될 것입니다 sendMessage을 구현하는 올바른 방법 : 다음

sendMessage = function(requestURL, data, type, callback) { 
    console.log(requestURL); 
    console.log(data); 
    console.log(type); 
    //reset vars to defaults 
    msgRecieved = false; 
    msgResponse = null; 
    jQuery.ajax({ 
     url: "http://"+domain+"/_ajax/"+requestURL, 
     dataType: "html", 
     async: true, 
     data: data, 
     type: type, 
     success: function(msg){ 
      console.log(msg); 
      msgResponse = msg; 
      msgRecieved = true; 
      // Call the callback function to notify the message 
      // was received 
      callback(); 
     } 
    }); 
}; 

등처럼 사용 : 대신 방법에 대해 싸우는

sendMessage(urlHere, dataHere, typeHere, function() { 
    // Message has been received, msgResponse and msgReceived 
    // have already been updated. Do what you need here 
}); 

Answer 2

setTimeout 대신 JavaScript setInterval 함수를 사용해보십시오. 하지만 이번에는 sendMessage를 중단하고 ajax 메시지가 setInterval 아래에 수신 된 후에 실행해야하는 부분을 배치하십시오.

일단 ajax 메시지가 수신되면 sendMessage의 두 번째 부분이 실행되고 (messagereceived가 true가 된 후) 간격을 지 웁니다.

setTimeout()은 설정된 간격 후에 한 번만 실행되기 때문입니다.

setInterval()은 지울 때까지 exery 간격을 반복적으로 실행합니다.

자세한 내용은이 도움이 Here

희망을 찾을 수 있습니다!

Answer 3

두 번째 호출 (대기 함수에서 else 분기로)에서 이전에 작성한 시간 초과에 대한 참조가 파손되므로이 문제는 w 변수의 범위와 관련 될 수 있습니다. 따라서 clearTimeout은 ' 작업 : 즉각적인 바깥 범위에서 정의하려고하십시오.