0

我有两个输入文本字段和一个“保存”按钮。

<input type="text" id="myInput" />
<input type="text" id="searchResult"/>
<button id="myButton>save</button>

myInput文本字段有onchange 事件，然后发送 Ajax 请求以获取一些数据并将结果显示到searchResult文本字段。

保存按钮具有单击事件，可验证searchResult文本字段的输入是否为空字符串等。如果确定，则继续保存。

$("myInput").change(function() {
    var userInput = $("myInput").val(); //get value from the text field
    var responseText = callAjaxToGetData(userInput):  //XHR request to get some data

    $("searchResult").val( responseText ); //show the XHR result here

});


$("myButton").click(function() {
    var searchResultField = $("searchResult").val(); //get value from the searchResult field
    var isOK = validate(searchResultField);  //check empty string and such

    if(isOK) { saveDataViaAjax(userInput); }
});

问题

当用户在文本字段中输入一些文本然后单击“save"按钮时，

  1. onchange event被触发，callAjaxToGetData()被调用。(XHR)

  2. beforecallAjaxToGetData()完成并填写 searchResult 文本字段，myButtononclick event被触发。

  3. 在 onclick 事件处理程序方面，验证失败，因为 searchResult 字段仍然为空。

  4. callAjaxToGetData()最后完成并填写 searchResult 文本字段。

理想情况下，首先完成 callAjaxToGetData() 然后在 onclick 事件中继续该过程，这样验证就不会失败。

我猜这似乎是人们会面临的很常见的情况，所以我想知道你们是如何解决这个问题的？

我正在考虑将间隔放入 onclick 事件中，如下所示（这需要 responseText 是一个全局变量）

$("myButton").click(function() {

   var interval = setInterval(function() { //call every 500ms

       //if responseText is not null that means i know the ajax inside of onchange event is completed for sure.
       if( responseText != null ) {

           clearInterval(interval);

           var searchResultField = $("searchResult").val(); //get value from the searchResult field
           var isOK = validate(searchResultField);  //check empty string and such

           if(isOK) { saveDataViaAjax(userInput); }
       }
   }, 500);  
});
4

2 回答 2

1

下面的代码可能不准确，但我会在 ajax 之前禁用按钮并在回调返回后启用。

$("myInput").change(function() {
     $("myButton").attr("disabled", "disabled");
     var userInput = $("myInput").val(); //get value from the text field
     var responseText = callAjaxToGetData(userInput, function(data) {

        $("searchResult").val( data); //show the XHR result here
        $("myButton").removeAttr("disabled"); 
     }):
 });
于 2012-06-15T01:27:21.900 回答
0

我认为为了避免onClick event进程比 ajax 进程更快onChange event，设置计时器解决了这个问题。

首先，我创建了辅助函数来检查活动的 ajax 连接并调用将在 onClick 事件中调用的函数。

帮手

function check_pending_process(callback) {
    var interval = setInterval(function() {
        if($.active > 0) {
            //do nothing here
        }
        else {
            //no ajax is running, call the function after 500 ms
            clearInterval(interval);
            setTimeout(function() { window[callback].call() }, 500);
        }    
    }, 100);
}

呼叫者

function processButtonClick() {
    var searchResultField = $("searchResult").val(); //get value from the searchResult field
    var isOK = validate(searchResultField);  //check empty string and such

    if(isOK) { saveDataViaAjax(userInput); }

}

$("#myButton").click(function() {

    check_pending_process("processButtonClick");

});

500ms的判断是根据onchange事件中post-ajax的过程需要多长时间。就我而言，onchange 事件中的后 ajax 过程只是将响应文本放入文本字​​段，因此 500 毫秒就足够了。

于 2012-06-15T09:04:51.003 回答