阻止 JavaScript 函数进行运行相乘

Question

我阅读了 this answer 但我无法使用此代码迁移它。

<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

的替代方案

Answer 1

我认为最好的解决方案是在触发点击事件的操作之前检查是否存在任何正在进行的 ajax 调用。只有在没有现有事件的情况下，它们才会触发点击操作。我添加了示例代码。希望您能将其转换为您的确切要求。

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" />

Answer 2

<button class="btn btn-success" id="btnFunction" type="button">Play</button>
<img id="mainImage" src="images/noSignal.jpg">

<script>
    var isPlay = false;

    function play() {
        var newImage = new Image(),
            count = Date.now(),
            error = false;
        newImage.onerror = function () {
            document.getElementById("mainImage").src = "images/noSignal.jpg";
            iziToast.warning({
                position: "topCenter",
                title: "error in getting image",
                timeout: 1500,
            });
            error = true;
            setTimeout(function () {
                error = false;
                updateImage();
            }, 5000)
        }

        function updateImage() {
            if (isPlay && !error) {
                newImage.src = "playSocket.php?message=11001&image" + count++ + ".jpg";
                document.getElementById("mainImage").src = newImage.src;
                newImage.onload = function () {
                    updateImage();
                }
            }
        }
        updateImage();
    }

    $("#btnFunction").click(function () {
        isPlay = !isPlay;
        if (isPlay) {
            play();
            $("#btnFunction").html("Pause");
            $("#btnFunction").removeClass("btn-success");
            $("#btnFunction").addClass("btn-danger");
            $("#btnFunction").prop("disabled", true);
            setTimeout(function () {
                $("#btnFunction").prop("disabled", false);
            }, 1500);
        } else {
            $("#btnFunction").html("Play");
            $("#btnFunction").removeClass("btn-danger");
            $("#btnFunction").addClass("btn-success");
            $("#btnFunction").prop("disabled", true);
            setTimeout(function () {
                $("#btnFunction").prop("disabled", false);
            }, 1500);
        }
    });
</script>

阻止 JavaScript 函数进行运行相乘

Prevent JavaScript function from running multiply

html

javascript

onload

onerror

阻止 JavaScript 函数进行 运行 相乘

Prevent JavaScript function from running multiply

html

javascript

onload

onerror

阻止 JavaScript 函数进行运行相乘