Предотвратить многократное выполнение функции JavaScript

Я прочитал этот ответ, но не могу перенести его с помощью этого кода.

<button class="btn btn-success pause" id="btnFunction" onclick="toggleFunction();" type="button">Play</button>
<img id="mainImage" src="images/noSignal.jpg">

<script>
function play() {
  if ($("#btnFunction").hasClass("play")) {
    var newImage = new Image(),
      count = 0;
    newImage.onload = function() {
      updateImage();
    };
    newImage.onerror = function() {
      document.getElementById("mainImage").src = "images/noSignal.jpg";
      iziToast.warning({
        position: "topRight",
        title: "error in getting image",
        timeout: 1000
      });
      setTimeout(play, 2500);
    };
    newImage.src = "images/noSignal.jpg";

    function updateImage() {
      if (newImage.complete) {
        document.getElementById("mainImage").src = newImage.src;
        newImage.src = "playSocket.php?message=11001&image" + count++ + ".jpg";
      } else {
        iziToast.error({
          position: "topRight",
          title: "error in getting image",
          timeout: 1000
        });
        setTimeout(updateImage, 2500);
      }
    }
  }
}

function toggleFunction() {
  if ($("#btnFunction").hasClass("pause")) {
    $("#btnFunction").html("Disable Playing");
    $("#btnFunction").removeClass("btn-success pause");
    $("#btnFunction").addClass("btn-danger play");
    play();
  } else if ($("#btnFunction").hasClass("play")) {
    $("#btnFunction").html("Enable Playing");
    $("#btnFunction").removeClass("btn-danger play");
    $("#btnFunction").addClass("btn-success pause");
  }
}
</script>

Если я дважды нажму кнопку, она запустит функцию два раза, и если код не может получить изображение из playSocket.php, он покажет два раза iziToast.warning и повторит показ через 2,5 секунды и после этого, пока не получит изображение и не загрузит его изображение.

Как предотвратить многократное выполнение функции?

Есть лучший способ узнать, что изображение успешно загружено, и получить следующее изображение или ошибку при получении изображения и повторить попытку? альтернатива для newImage.onload и newImage.onerror


javascript html onload onerror
person Fakhamatia    schedule 31.12.2019    source источник
comment
Если щелкнуть два раза, в первый раз функция воспроизведения не будет выполняться, верно? который будет выполнен только при втором щелчке. Для того, чтобы запустить функцию два раза, необходимо нажать кнопку 4 раза. Правильно?   -  person Nitheesh    schedule 31.12.2019
comment
@Nitheesh извините, я редактирую это снова, я был действительно сбит с толку. это правильно сейчас?   -  person Fakhamatia    schedule 31.12.2019
comment
Вы можете проверить текущее решение?   -  person Nitheesh    schedule 31.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что лучшим решением будет проверка того, существует ли какой-либо текущий вызов ajax, прежде чем запускать действие события click. Только если нет существующего события, только они вызывают действие для клика. Я добавил пример кода. Надеюсь, вы сможете преобразовать это в свое точное требование.

var ajaxInProgress = false;
function play() {
  if ($("#btnFunction").hasClass("play")) {
    console.log('clicked');
    ajaxInProgress = true;
    var newImage = new Image(),
      count = 0;
    newImage.onload = function() {
      ajaxInProgress = false;
      updateImage();
    };
    newImage.onerror = function() {
      ajaxInProgress = false;
      document.getElementById("mainImage").src = "https://www.w3schools.com/html/pic_trulli.jpg";
      console.error('error in getting image');
      setTimeout(play, 2500);
    };
    newImage.src = "https://www.w3schools.com/html/pic_trulliddd.jpg";

    function updateImage() {
      if (newImage.complete) {
        document.getElementById("mainImage").src = newImage.src;
        newImage.src= 'https://www.w3schools.com/html/img_girl.jpg';
      } else {
        console.error('error in getting image');
        setTimeout(updateImage, 2500);
      }
    }
  }
}

function toggleFunction() {
  if(!ajaxInProgress) {
    if ($("#btnFunction").hasClass("pause")) {
      $("#btnFunction").html("Disable Playing");
      $("#btnFunction").removeClass("btn-success pause");
      $("#btnFunction").addClass("btn-danger play");
      play();
    } else if ($("#btnFunction").hasClass("play")) {
      $("#btnFunction").html("Enable Playing");
      $("#btnFunction").removeClass("btn-danger play");
      $("#btnFunction").addClass("btn-success pause");
    }
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<button class="btn btn-success pause" id="btnFunction" onclick="toggleFunction();" type="button">Play</button>
    <img id="mainImage" src="https://www.w3schools.com/html/pic_trulli.jpg" />

person Nitheesh    schedule 31.12.2019