Question

在我的网站website.com/NewPage上创建了一个新页面我希望此页面上的视频在创建页面的20秒内开始。

目前，我有一个等待20秒的setTimeout功能然后启动视频。问题是当每个用户连接时，20秒定时器启动。我的目标是让网站在页面创建后20秒启动视频，所有人。这是一个例子：

用户A 在创建页面后的3秒内进入website.com/NewPage。 用户B 在创建页面后的15秒内进入website.com/NewPage。

用户B 连接后<秒>，用户A 的视频开始播放。 用户B 为5秒，必须等待15秒才能启动视频。

我的目标是让视频在同一时间开始播放给所有人，只要他们在20秒之前加入（没有其他人可以在20秒后加入）。

因此，即使用户B 加入较晚，它也会在每个人的同一时间开始。

Answer 1

必须在服务器上进行协调。您使用长轮询标记了这一点，因此我认为这是您正在使用的服务器通信技术。为新页面打开第一个长轮询连接时，然后在服务器上启动计时器。

Answer 2

由于您在不同用户之间共享计时器，我认为您需要在后端维护计时器。在前端JavaScript中，为每个用户（在其本地浏览器上）维护一个单独的计时器。

说，您的前端代码可能是：

var timer = null;
document.onload = function() {
    $.ajax({
        url: '/server/timer',
        type: 'get',
        data: {userName: 'user A'}
    }).done(function (res) {
        if (res.remaining && res.remaining >= 0) {
            alert('Hi, please wait for ' + res.remaining + ' seconds to start playing video');
            timer = setTimeout(function() {
                 // play the video
            }, res.remaining * 1000);
        } else {
            alert('Sorry, you cannot watch the video now');
        }
    });
}

在后端代码中，维护API /server/timer以确保每个用户的倒计时相同。

JavaScript中的全局计时器

2 个答案: