JavaScript中的全局計時器

Question

我的網站上創建了一個新頁面，網站/網頁 我希望此頁面上的視頻在創建頁面的20秒內開始。

目前，我有一個setTimeout函數等待20秒，然後啓動視頻。這個問題是每個用戶連接20秒計時器開始。我的目標是讓網站在頁面創建後20秒後啓動視頻，對於大家都。以下是一個示例：

用戶A在創建頁面的3秒內輸入website.com/NewPage。 用戶B在創建頁面的15秒內輸入website.com/NewPage。

後5秒用戶B連接，用戶A的視頻開始。 用戶B處於5秒鐘，必須等待15秒才能開始播放視頻。

我的目標是讓視頻在同一時間開始給每個人，只要他們在20秒前加入（沒有人可以在20秒後加入）。

因此，即使用戶B加入較晚，它將在同一時間開始爲每個人。

Answer 1

它必須在服務器上進行協調。你用long-polling標記了這個，所以我想這就是你正在使用的服務器通信技術。當爲新頁面打開第一個長輪詢連接時，請在服務器上啓動一個定時器。

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以確保倒計時是爲每個用戶相同。