有条件地暂停Javascript以等待ajax

时间:2012-11-29 17:22:51

标签: ajax jquery-ui jquery

变量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调用),我不希望有延迟。

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

默认情况下,每当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();