Question

我对js的态度并不是那么好，并且慢慢开始掌握它：我有一个小的（工作）网络摄像头应用程序需要一张照片并将base64插入（隐藏）＃ formfield b4张贴表格 - ＆gt;

button code:
<input type="image" src="images/takepic.jpg"  id="btn1" onclick="base64_tofield()">


function base64_tofield() {

                $('#formfield').val($.scriptcam.getFrameAsBase64());
};

我需要的是一个div在按钮实际提交之前显示倒计时3 .. 2 .. 1（秒） - 有没有办法将此功能延迟3秒并拥有计时器？ - 它的所以ppl可以准备好拍照..

我试过这个

setTimeout(function() { base64_tofield() },5000);

在各个地方但没有工作 - 它仍然需要立即。倒计时器必须添加并且不提供其他功能，而不是仅仅倒计时，以便用户有时间准备。

按钮将base64数据抓取到表单域并提交表单..我想也许延迟函数会延迟表单但它没有，我认为我需要的是延迟表格3.5秒 - 和函数3 ..所以当用户点击“拍照”时，计时器启动，3秒后 - 函数base64_tofield（）触发（拍摄图片），然后1/2秒后表格提交..

它只是让用户有时间在提交之前准备好噱头镜头

Answer 1

将所有内容包装到setTimeout JS计时器......

中

setTimeout(base64_tofield(), 2000);

...或者您可以在提交时使用delay()功能。

Answer 2

您需要在onclick函数中返回false，否则表单将立即发布。或者，您可以使用jQuery绑定到submit事件，并使用event.preventDefault（）;

<form id="form1" method="post" action="">
    <div id="countdown"></div>
    <input type="hidden" name="encryptedImage" id="formfield" />
    <input id="submitform" type="submit" name="capture" value="capture"></input>
</form>
<script>
$(function() {
    $('#form1').submit(function(e) {
        base64_tofield();
        e.preventDefault();
    });


    function base64_tofield() {
        var interval;
        var countdown = 4;

        interval = setInterval(function() {
            $('#countdown').html(--countdown);
            if(countdown === 0){
                $('#formfield').val($.scriptcam.getFrameAsBase64());
                $('#form1')[0].submit();
            };
        }, 1000);
    };
});
</script>

如果我理解正确的话，上面的代码会按照您的意愿行事，在提交表单前等待3秒。

Answer 3

<input type="text" id="countdown" value="3" />
<input type="button" id="begincountdown" value="Start Countdown" />

<script>
    function base64_tofield() {
       console.log( 'Encode!' );   
    }

    $('#begincountdown').on( 'click', function() {
        var secondscounter = 3,
            countdown = setInterval(function(){ 
                $('#countdown').val( secondscounter-- );
                if ( !secondscounter ) {
                  clearInterval( countdown ); 
                  base64_tofield();
                }
        }, 3000 );
    });
</script>

小提琴： http://jsfiddle.net/XytRt/27/

执行前3秒延迟输入功能

3 个答案: