有條件暫停Javascript等待ajax

Question

變量ajaxdata在成功函數中被修改，如果還沒有完成，我想等待2秒，然後繼續沒有它。

該用例用於jqueryui自動填充字段。自動完成源是一個ajax請求，但如果用戶鍵入的速度很快，並且在列表加載之前退出該字段，則該字段將保持未設置狀態。在自動完成上使用'change'事件我檢查用戶是否在未選中的情況下輸入了有效的選項，但是如果在更改事件觸發時尚未加載源，則這不起作用。因此，如果源（存儲在變量'ajaxdata'中）爲空，我想延遲更改函數等待。

代碼：

input.autocomplete({ 
      source: function (request, response){ 
        $.ajax(
         { 
          type: "GET", 
          url: "/some/url", 
          dataType: "json", 
          success: function(data){ 
           response($.map(data,function(item){ 
            return{ 
             label: item.label, 
             value: item.value 
            } 
           })); 
           ajaxdata = data; 
          } 
         } 
        ); 
        // ajaxopts = ajaxsource(request,response,ajaxurl,xtraqry) 
       },     
      change: function(event, ui) { 
       if (!ui.item) { 
        // user didn't select an option, but what they typed may still match 
        var enteredString = $(this).val(); 
        var stringMatch = false; 
        if (ajaxdata.length==0){ 
         /// THIS IS WHERE I NEED A 2 SECOND DELAY 
        } 
        var opts = ajaxdata; 
        for (var i=0; i < opts.length; i++){ 
         if(opts[i].label.toLowerCase() == enteredString.toLowerCase()){ 
          $(this).val(opts[i].label);// corrects any incorrect case 
          stringMatch = true; 
          break; 
         } 
        } 
      } 
      }, 
     }); 

編輯：

更具體地講這個問題：這種延時必須是有條件的。這意味着如果數據已經被加載（或者因爲它來自靜態源，或者來自早期的Ajax調用），我不希望有延遲。

Answer 1

如果我的理解你說得對，我想你只是想檢查一下，看看ajaxdata是否已經填充;但如果沒有，只需等待兩秒鐘，然後就可以繼續。

試試這個：

change: function(event, ui) { 
    if (!ui.item) { 
     // user didn't select an option, but what they typed may still match 

     if (ajaxdata.length==0){ 
      /// THIS IS WHERE I NEED A 2 SECOND DELAY 

      //pass in 'this' so that you can use it 
      setTimeout(function() {correctCase(this);}, 2000); 
     }  
    } 
} 

。 。 。 。 。

function correctCase(inThis){  

    //I'm not sure what this variable does. do you really need it??? 
    var stringMatch = false; 

    var enteredString = $(inThis).val(); 
    //you still want to be sure that ajaxdata is not empty here 
    if (ajaxdata.length==0){ 
     var opts = ajaxdata; 
     for (var i=0; i < opts.length; i++){ 
      if(opts[i].label.toLowerCase() == enteredString.toLowerCase()){ 
       $(inThis).val(opts[i].label); // corrects any incorrect case 
       stringMatch = true; //this variable doesn't seem to do anything after this??? 
       break; 
      } 
     } 
    } 
} 

Answer 2

我真的不知道它是什麼你想要做的，但我敢肯定，這樣的事情會做的更好的辦法：

input.autocomplete({ 
    source: function(request, response) { 
     return $.ajax({ 
      type: "GET", 
      url: "/some/url", 
      dataType: "json" 
     }); 
    }, 
    change: function(event, ui) { 
     if (!ui.item) { 
      // user didn't select an option, but what they typed may still match 
      var enteredString = this.value; 
      var stringMatch = false; 
      //make sure ajax is complete 
      this.source().done(function(data) { 
       var opts = $.map(data, function(item) { 
        return { 
         label: item.label, 
         value: item.value 
        } 
       }); 
       for (var i = 0; i < opts.length; i++) { 
        if (opts[i].label.toLowerCase() == enteredString.toLowerCase()) { 
         $(this).val(opts[i].label); // corrects any incorrect case 
         stringMatch = true; 
        } 
       } 
      }); 
     } 
    } 
});​