Javascript 如何制作屏幕上的计数器，在计数器完成之前阻止功能

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

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

我找到了JQuery AnimateCount函数和a，但无法使其工作

有人能帮我吗

/编辑非工作代码：

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

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;

这仅在消息div中显示“3”，然后才开始录制…

此代码：

$('#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();

致：

---

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

callback();

setTimeout(callback, 3000);