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

If you click two times, at the first time the play function will not be executed right? that will be executed on your second click only. In order to run the function two times, you have to click the button 4 times. right? — Nitheesh, Dec 31 '19 at 09:07
@Nitheesh sorry, I edit it again, I was really confused. it is correct now? — Fakhamatia, Dec 31 '19 at 09:30

Nitheesh · Answer 1 · 2019-12-31T09:54:08.380

I think the best solution will be checking whether there is any ongoing ajax call exist before triggering the action of the click event. Only if there is no existing event, only them trigger the action for the click. I have added a sample code. Hope you can convert this to your exact requirement.

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

Fakhamatia · Accepted Answer · 2020-02-06T18:00:35.997

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

Prevent JavaScript function from running multiply

2 Answers2