как сделать ожидание завершения ajax

#javascript #jquery #ajax

#javascript #jquery #аякс

Вопрос:

Я новичок. У меня есть функциональное заявление о приеме на работу (apply-job).Что я делаю, так это отправляю запрос с помощью обычной ссылки, к которой применяется функция щелчка, но время обработки довольно длительное. Я хочу отключить «#apply-job», чтобы не нажимать слишком много или отключить окно и исчезнуть для завершения ajax. Спасибо. Мой JS:

 $("#apply-job").click(function() {
        if($('#jobcandidate-name').val() != '' amp;amp; $('#jobcandidate-email').val() != '' amp;amp; $('#jobcandidate-phone').val().length >= 10 amp;amp; $('#jobcandidate-address').val() != '' amp;amp;  ($("input[name='CandidateAttachment[2][fileAttachment][path]']").val() != undefined || $('#jobcandidate-curriculum_vitae').val() != '') ){
            let data = $('#apply-job-form').serialize();
            let roleArticle = $('.show_new_role :input').serialize();
            if ($('#apply-job-form').find('.has-error').length){
                swal("Thử lại", "Vui lòng kiểm tra lại thông tin!", "error");
            } else {
                $.ajax({
                    url: '$urlRequest',
                    type: 'POST',
                    dataType: 'html',
                    data : data   'amp;'   roleArticle
                }).done(function(result) {
                    response = JSON.parse(result);
                    if (response.type == "success"){
                        let checkReload = swal("Thành công", "Cảm ơn bạn đã ứng tuyển!", "success");
                        checkReload.then(function() {
                            location.reload();
                        });
                    }
                });
            }
        } else {
            if ($("input[name='CandidateAttachment[2][fileAttachment][path]']").val() == undefined amp;amp; $('#jobcandidate-curriculum_vitae').val() == '') {
                $('#jobcandidate-curriculum_vitae').parents('.form-group').find('.txt-lable').css('color','red');
                $('#jobcandidate-curriculum_vitae').parents('.form-group').find('.show_error2').text('* Không được bỏ trống');
            }
            swal("Thử lại", "Vui lòng kiểm tra lại thông tin!", "error");
        }
    });

1. Установите переменную в более высокой области видимости выше $('.apply-job') , например let clicked = false; , тогда внутри .click(function(){ clicked = true; , а затем внутри .done(function(result){ внизу clicked = false; .

Ответ №1:

ajax есть await опция. Вы можете использовать его, чтобы заставить выполнение ждать, пока ajax все не будет сделано. Убедитесь, что вы объединили его с async which, который покажет, что в функции есть асинхронный шаг. Смотрите фрагмент ниже

 $("#apply-job").click(async function() {
  ......
  await $.ajax({
  ......
});

Обновление: чтобы убедиться, что щелчок отключен во время работы ajax, добавьте disabled атрибут и назначайте щелчок только тогда, когда атрибут отсутствует. Очистите атрибут после завершения процесса.

 $("#apply-job:not([disabled])").click(async function() {
  $("#apply-job").attr("disabled","disabled")
  ......
  await $.ajax({
  ......
  $("#apply-job").remoeAttr("disabled")
});