Question

在我的网站上，我想在点击按钮录制wbcam后显示屏幕事件（以便人们知道录制何时开始）。

我想使用一次调用的jQuery / JavaScript方法，阻止正在运行的函数并显示＆＃34; 3,2,1＆＃34; （倒计时）在屏幕上。之后我希望功能继续。

我找到了JQuery AnimateCount函数和一个jquery-count-to plugin，但我无法让它工作。

有人能帮助我吗？

/编辑非工作代码：

我有一个开始录制网络摄像头的功能，如下所示：

function startRecording() {
    $("#recordStartButton").attr("disabled", true);
    $("#recordStopButton").attr("disabled", false);
    $("#recordPauseResumeButton").attr("disabled", false);
    $.scriptcam.startRecording();
}

一旦用户点击＆＃34;开始录制＆＃34;我就会调用此功能使用具有回调的函数，如下所示：

<button id="recordStartButton" class="success" onclick="startRecordingWithCounter(startRecording)" disabled>Start Recording</button>&nbsp;

其中startRecordingWithCounter（startRecording）如下所示：

function startRecordingWithCounter(callback) {
    $('#message').animateCount(1, 3);
    callback();
}

这只显示＆＃34; 3＆＃34;在消息div中然后才开始录制...

Answer 1

此代码：

$('#message').animateCount(1, 3);
callback();

告诉插件启动计数动画。但是这个电话并没有阻止＆＃34;直到动画完成 - 它立即从函数返回。（这很重要，因为Javascript是一种单线程语言。锁定函数会导致丑陋的浏览器死机。）

因此animateCount函数立即返回，并立即调用callback！

但是，您使用的库确实允许您指定onComplete功能。所以你应该这样做：

$('.message').countTo({
    from: 1,
    to: 3,
    speed: 3000,
    refreshInterval: 50,
    formatter: function (value, options) {
        return value.toFixed(options.decimals);
    },
    onComplete: callback
});

动画完成后，图书馆应调用callback函数。

我不知道您是否需要提供formatter功能。

另一种方法是简单地更改您当前的代码：

callback();

为：

setTimeout(callback, 3000);

如何制作屏幕计数器，阻止功能直到计数器完成

1 个答案: