根据 WebSocket 接收到的数据刷新的倒数计时器

Question

我想构建一个 10 秒 JQuery 倒数计时器，其中包含 每秒刷新一次的 WebSocket。它应该在 x 秒重置计时器（取决于我从 WebSocket 获得的数据）。如果我获得特定计时器的数据，它应该重新开始并再次从 10 秒开始倒计时，但只有 对于这个特定计时器 。如果这些计时器之一下降到 0，倒计时应该完全停止。

目前我出于演示原因使用 setInterval，但我想将此计时器实现到 WebSocket，如前所述：http://jsfiddle.net/alexiovay/azkdry0w/5/

JavaScript:

var setup = function(){
  $('.count').each(eachSetup);    
};

var eachSetup = function(){
  var count = $(this);
  var sec = count.data('seconds') ;  
  count.data('count', sec);
};

var everySecond = function(){  
  $('.count').each(eachCount);    
};

var eachCount = function(){
  var count = $(this);
  var s = count.data('count');
  count.text(s);
  s--;
  if(s < 0) { 
    s = 0;
  }
  count.data('count', s);
};

setup();
setInterval(everySecond, 1000);

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="count" data-seconds="5"></p>
<p class="count" data-seconds="10"></p>
<p class="count" data-seconds="15"></p>

我的 WebSocket 是这样启动的，每秒刷新一次：

var socket = io.connect('http://localhost:8000');   
socket.on('notification', function (data) {
    $.each(data.rows,function(index,row){   
...

Answer 1

如果你从套接字中获取 data.user 和 data.seconds，你可以执行以下操作：

var timers = []; // Creates an array to store your timers
socket.on('notification', function(data) { // Listen for 'notification' from socket
    if(timers.length > 0) {
        for(i in timers) {
            if(timers[i][0] === data.timer) {
                timers[i][1] = 10; // If timer for data.user already exists, set it to 10 seconds again.
            } else {
                timers.push([data.timer, data.seconds]); // Else, create it with data.seconds seconds
            }
        }
    } else {
        timers.push([data.timer, data.seconds]);
    }
}

function timerCount() {
    for(i in timers) {
        if(timers[i][1] <= 0) {
            delete timers[i]; // If timer seconds is less than 0, delete it.
        } else {
            timers[i][1]--; // Else, decrease it by 1 second.
        }
    }
}

setInterval(timerCount, 1000); // Runs the timerCount() function every second.

根据 WebSocket 接收到的数据刷新的倒数计时器

Countdown timer that refreshes depending on the data I receive by a WebSocket

javascript

jquery

timer

countdown

countdowntimer