如何制作一个屏幕上的计数器来阻止功能直到计数器完成答案

【问题标题】：How to make an onscreen counter that blocks the function till a counter is done如何制作一个屏幕上的计数器来阻止功能直到计数器完成
【发布时间】：2014-05-04 08:26:52
【问题描述】：

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

我想使用一个 jQuery/JavaScript 方法，该方法一旦被调用，就会阻止正在运行的函数并在屏幕上显示“3、2、1”（倒计时）。之后我希望该功能继续。

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

有人可以帮帮我吗？

/编辑非工作代码：

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

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

一旦用户点击“开始录制”，我就会调用这个函数，其中的回调函数如下：

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

startRecordingWithCounter(startRecording) 看起来像这样：

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

这只会在消息 div 中显示“3”，然后才开始录制...

【问题讨论】：

你能发布你的非工作代码吗？
您想记录来自网络摄像头的流数据，但您无法从 3 开始倒计时？

标签： javascript jquery

【解决方案1】：

这段代码：

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

告诉插件开始计数动画。但在动画完成之前，该调用不会“阻塞”——它会立即从函数返回。（这很重要，因为 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);

【讨论】：