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を参照すると、関数を呼び出したり、コードスニペットを実行したりすることができます。時間を設定します。

Webcam.snap関数を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>