javascript - 如何在jquery中使用Delay来执行方法

Question

我在其中一个表单中使用 jquery。在单击提交按钮时，我调用了一个函数 QuoteDetailValidation()。我在其中验证字段。但是在验证这些字段之后，我尝试获取所有具有 errorActive 类的字段。但不幸的是我无法得到它。

查看我的代码

$('#saveQuote').on('click', function(event) {

    var descriptionData1 = $('input[name=\"QuoteDetail[description][]\"]');
    QuoteDetailValidation(descriptionData1);

    var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length;

    alert(selectors);
    return false;
});

function QuoteDetailValidation(descriptionData1) {

    for (var i = 0; i < descriptionData1.length; i++) {

        var id = descriptionData[i].id;
        var value = descriptionData[i].value;
        var costid = costData[i].id;
        var costValue = costData[i].value;

        $.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });
    }
}

现在会发生什么，当出现错误时 QuoteDetailValidation() 将 errorActive 类附加到字段。

通过 var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length; 我尝试获取具有 errorActive 的字段的长度类(class)。但在 selectors 警报中，它总是给出 0。但是，当我在获取所有 errorActive 类之前提醒某些事情时，然后提醒 selectors 给我完美的计数。我认为在获取类 errorActive 之前由于警报而存在延迟。以便它给我计数。如何使用它。请任何帮助。提前致谢。

Answer 1

您可以确定正确初始化选择器所需的确切延迟。我们添加的任何延迟都将是假设，并且对于某些场景来说可能很短在您的 ajax 请求中使用下面的一个选项

async: false

如下所示:-

$.ajax({
            type: 'GET',
            async: false,
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {}});

将 async 设置为 false 意味着您正在调用的语句必须在函数中的下一个语句被调用之前完成。如果您设置 async: true(这是默认值)，那么该语句将开始执行，并且无论异步语句是否已完成，都会调用下一条语句。 Helpful question

但我仍然会建议您像下面这样移动选择器以成功实现 ajax:-

$.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length;
alert(selectors);
//some logice here or move the above in some function and call it here

            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });

或使用 call back functions.

更新:尝试像下面这样的东西它将保持异步为真并将计数逻辑保持在 $.ajax 之外。

function QuoteDetailValidation(descriptionData1,submitFormOrAddError) {

    for (var i = 0; i < descriptionData1.length; i++) {

        var id = descriptionData[i].id;
        var value = descriptionData[i].value;
        var costid = costData[i].id;
        var costValue = costData[i].value;

        $.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
                submitFormOrAddError(data);
            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });
    }
}

这样调用它:

$('#saveQuote').on('click', function(event) {

    var descriptionData1 = $('input[name=\"QuoteDetail[description][]\"]');
    QuoteDetailValidation(descriptionData1);


    QuoteDetailValidation(descriptionData1,function(output){
            // here you use the output
            var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length; //This line is excuted only after call completes
            alert(selectors);
            //form submit here if error is zero.
        });

        alert("hii");//this  line is executed without waiting for above call..
        return false;
});