Question

变量ajaxdata在成功函数中被修改，如果尚未完成，我想等待2秒，然后在没有它的情况下继续。

用例适用于jqueryui自动完成字段。自动完成源是一个ajax请求，但如果用户快速键入，并在列表加载之前退出该字段，则该字段将保持未设置状态。在自动完成上使用“更改”事件，我检查用户是否输入了有效选项而未选择它，但如果在更改事件触发时未加载源，则此操作无效。所以如果源（存储在变量'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

我不确定你要做的是什么，但我很确定这样的事情会更好：

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;
                    }
                }
            });
        }
    }
});

Answer 2

如果我正确理解你，我想你只想检查一下是否填充了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 3

默认情况下，每当JavaScript遇到异步函数时，它都是异步的，它将对该函数排队以便稍后使用。但是，如果您想暂停js（ajax调用或其他操作），则可以使用promises 情况1：输出hello（将不等待setTimeout） https://jsfiddle.net/shashankgpt270/h0vr53qy/

//async 
function myFunction() {
let result1='hello'
//promise =new Promise((resolve,reject)=>{
setTimeout(function(){ 
resolve("done");
result1="done1";
}, 3000);
//});
 //result = await promise
 alert(result1);
}
myFunction();

情况2：输出done1（将等待setTimeout） https://jsfiddle.net/shashankgpt270/1o79fudt/

async function myFunction() {
let result1='hello'
promise =new Promise((resolve,reject)=>{
setTimeout(function(){ 
resolve("done");
result1="done1";
}, 3000);
});
 result = await promise
 alert(result1);
}
myFunction();

有条件地暂停Javascript以等待ajax

3 个答案: