Как отключить кнопку формы до полного завершения функции

Question

Так что все в сценарии работает отлично. Однако в этой части кода есть проблема:

var min = 1;
while (min < 200) {
    var max = min + 30;

    scan(fruitID, min, max);

    var min = max;
}

Что я хочу от этого l oop:

1. Вычисления max Значение
2. Вызывает scan() function
3. Ожидает, пока ajax при сканировании успешно получит данные и отобразит их на экране.
4. Вычисляет min значение
5. Повторяет l oop

Ошибка в шаге 3. Он не ждет, пока ajax вернет данные и обработает их. Это просто сразу повторяет l oop. Как заставить l oop дождаться полного завершения функции scan().

$(document).ready(function() {


    $('#submit').click(function(e){
    e.preventDefault();

    $("#submit").attr("disabled", true);
    $("#submit").html("Verifying Username");
    var fruitName = $("#fruit-name").val();

    $.ajax({
        type: "POST",
        url: "verify-input.php",
        dataType: "json",
        data: {fruitName:fruitName},
        success : function(data){
            if (data.code == 200){
                $("#submit").html("Running Scan");
                var fruitID = data.fruitId;
                //alert("Fruit ID: " + fruitID);

                var min = 1;
                while (min < 200) {
                    var max = min + 30;

                    scan(fruitID, min, max);

                    var min = max;
                }

            } else {
                $("#submit").attr("disabled", false);
                $("#submit").html("Submit");
                $(".display-error").html("<ul>"+data.msg+"</ul>");
                $(".display-error").css("display","block");
            }
        }
    });


    });
});

function scan(vFruitId, min, max) {

    $.ajax({
        type: "POST",
        url: "scanner.php",
        dataType: "json",
        data: {vFruitId: vFruitId, min: min, max: max},
        success : function(data){
            data.forEach((item, idx) => {
              $("#results").append(`
                <div class="fruit-item" data-item="${idx}">
                    <div class="f-calories">calories: ${item.sweetness}</div>
                    <div class="f-sweetness">sweeteness: ${item.calories}</div>
                    <div class="f-bitterness">bitterness: ${item.bitterness}</div>
                </div>
              `);
      })
        }
    });

}

<form>
  <label for="fname">Fruit (only correct input is: banana)</label><br>
  <input type="text" id="fruit-name" name="fruit" value="banana"><br>
  <button type="submit" id="submit" value="Submit">Submit</button>
</form>

<div id="results">
</div>

Answer 1

примечание: ваш исходный код не включает кнопку формы повторно, поэтому заголовок вопроса немного вводит в заблуждение

Решение состоит в том, чтобы использовать объект типа Promise, возвращаемый $. ajax

В следующем коде используется обозначение стрелки , как в вопросе, но не используется async/await, поэтому будет работать везде, где работает код в вопросе

$(document).ready(function () {

    $('#submit').click(function (e) {
        e.preventDefault();

        $("#submit").attr("disabled", true);
        $("#submit").html("Verifying Username");
        var fruitName = $("#fruit-name").val();

        $.ajax({
            type: "POST",
            url: "verify-input.php",
            dataType: "json",
            data: {
                fruitName: fruitName
            },
            success: function (data) { 
                if (data.code == 200) {
                    $("#submit").html("Running Scan");
                    var fruitID = data.fruitId;
                    //alert("Fruit ID: " + fruitID);

                    function runscan(min) {
                        return scan(fruitID, min, min+30)
                        .then(() => {
                            min = min + 30;
                            if (min < 200) {
                                return runscan(min);
                            }
                        });
                    }
                    runscan(1)
                    .then(() => {
                        // all done here
                    });

                } else {
                    $("#submit").attr("disabled", false);
                    $("#submit").html("Submit");
                    $(".display-error").html("<ul>" + data.msg + "</ul>");
                    $(".display-error").css("display", "block");
                }
            }
        });

    });
});

function scan(vFruitId, min, max) {
    return $.ajax({
        type: "POST",
        url: "scanner.php",
        dataType: "json",
        data: {
            vFruitId: vFruitId,
            min: min,
            max: max
        },
        success: function (data) {
            data.forEach((item, idx) => {
                $("#results").append(`
                <div class="fruit-item" data-item="${idx}">
                    <div class="f-calories">calories: ${item.sweetness}</div>
                    <div class="f-sweetness">sweeteness: ${item.calories}</div>
                    <div class="f-bitterness">bitterness: ${item.bitterness}</div>
                </div>
              `);
            })
        }
    });

}

В качестве альтернативы, используя async / await, можно написать основной код success

success: function(data) {
  if (data.code == 200) {
    $("#submit").html("Running Scan");
    (async function() { // `success` can't be async, because jquery doesn't like that
      var fruitID = data.fruitId;
      //alert("Fruit ID: " + fruitID);
      var min = 1;
      while (min < 200) {
        await scan(fruitID, min, min + 30);
        min = min + 30;
      }
    })();
  } else {
    $("#submit").attr("disabled", false);
    $("#submit").html("Submit");
    $(".display-error").html("<ul>" + data.msg + "</ul>");
    $(".display-error").css("display", "block");
  }
}

Важное примечание: вы все равно ДОЛЖНЫ return $.ajax в function scan согласно первому фрагменту кода