有条件暂停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; 
        } 
       } 
      }); 
     } 
    } 
});​