CODEWITHSUNDEEP
javascriptjquery
Jeff F
Jeff F

Reputation: 25

Count down from 5 before running jquery

I have a jQuery camera plugin that uses the following command to take a snapshot.

<img id="camera_icon" src="images/icons/camera-icon2.png" onClick="take_snapshot()">

Here is the code it runs.

<script language="JavaScript">
function take_snapshot() {
    // take snapshot and get image data
    Webcam.snap( function(data_uri) {
        // display results in page
        document.getElementById('results').innerHTML = 
            '<h2>Saved Snapshot</h2>' + 
            '<img src="'+data_uri+'"/>';

        Webcam.upload( data_uri, 'save_snapshot.php', function(code, text) {
            // Upload complete!
            // 'code' will be the HTTP response code from the server, e.g. 200
            // 'text' will be the raw response content
        }); 
    });
}
</script>

I am looking for a solution that will count down from 5, and then take a snapshot when it reaches 0. Right now, when someone clicks the button, it will instantly take the picture. The solution doesn't have to be fancy, but should indicate to the user that it's counting down from 5.

Upvotes: 0

Views: 203

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62851

You'll want to look at setTimeout, it allows you to call a function or execute a code snippet after a set amount of time.

In your case, you can wrap the Webcam.snap function with window.setTimeout.

function take_snapshot() {

    var timer = document.getElementById('shutter');
    timer.setAttribute("disabled", "disabled");
    timer.innerHTML = 5;

    var countdown = window.setInterval(function() {
    var seconds = timer.innerHTML;
    seconds = seconds - 1;
    timer.innerHTML = seconds;

    if (seconds == 0) {
      timer.innerHTML = "Take Pic";
      timer.removeAttribute("disabled");
      clearInterval(countdown);
    }
  }, 1000);

  window.setTimeout(function() {

    // Run your code here

  }, 5000);
}
button {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  font-size: 14px;
}
<button onClick="take_snapshot()" id="shutter">Take Pic</button>
<div id="timer"></div>

Upvotes: 1

Related Questions