javascript - 运行 jquery 之前从 5 倒数

Question

我有一个 jQuery 相机插件，它使用以下命令来拍摄快照。

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

这是它运行的代码。

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

我正在寻找一种解决方案，从 5 开始倒计时，然后在达到 0 时拍摄快照。现在，当有人单击按钮时，它会立即拍摄照片。该解决方案不必很花哨，但应该向用户表明它正在从 5 开始倒计时。

Answer 1

您需要查看setTimeout ，它允许您在设定的时间后调用函数或执行代码片段。

就您而言，您可以使用 window.setTimeout 包装 Webcam.snap 函数。

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>