Prevent JavaScript function from running multiply

Question

I read this answer but I can't migrate it with this code.

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

If I click two times the button it's run two times function, and if code cant get image from playSocket.php it's showing two times iziToast.warning and repeat showing after 2.5 seconds and after that until its getting image and its image load.

How to prevent the function from running multiply?

There is a better way to knowing image it's loaded successfully and getting the next image or error in getting image and try again? alternative for newImage.onload and newImage.onerror

Answer 1

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