正确调试 Javascript 问题？（很可能是客户端）

Question

这个问题很可能是客户端问题，但我不确定。这是关于一个拍卖网站，我使用 WebSocket（node.js 服务器）每秒获取数据（价格、剩余时间）。

如果价格发生变化，我的脚本会自动触发一个事件，在该事件中，本次拍卖的倒计时和价格会闪烁，并且我的数组 timers 会刷新为剩余秒数 (auction.duration)：

if ($('.price' + timers[i][0]).data('curr_text') !== $('.price' + timers[i][0]).text()) 
{
$(".flashing" + timers[i][0]).toggle("highlight").toggle("highlight");
timers[i][1] = auction.duration;        
}

所以，我离开了几个小时，一些拍卖计时器归零（显示为 00:00:00），但不是所有计时器。当我刷新页面时，这些拍卖仍然是运行，所以这很可能是客户端 JavaScript 问题。还有一个大问题，因为用户认为拍卖已经结束，刷新页面并会注意到它实际上仍然是运行.

我只能猜测这个问题的发生是由于一些时间问题，但我不确定。我也不知道如何调试这个问题，因为我不能盯着屏幕几个小时等待它发生。所以我很感激调试这个的建议。

我认为向您展示我的完整代码也很有帮助，也许您会看到我遗漏的内容：

// prevent flashing after page loaded
$(".refresh-item").each(function() {
$this = $(this);
var id = $this.attr("data-id"); 
$('.price' + $this.attr("data-id")).data('curr_text', $('.price' + id).text());
});
// format timer
var formatSeconds = function(secs){
    var pad = function(n) {
        return (n < 10 ? "0" + n : n);
    };
    var h = Math.floor(secs / 3600);
    var m = Math.floor((secs / 3600) % 1 * 60); // Reminder of an hour of seconds x 60
    var s = Math.floor((secs / 60) % 1 * 60); // Reminder of a minute of seconds x 60
    return pad(h) +":"+ pad(m) +":"+ pad(s);
};  

var timers = [];
var socket = io.connect('http://xxx.rhcloud.com:8000/',{'forceNew':true });
socket.on('stream', function (data) {
    $.each(data.streamArray,function(index,auction){    
    duration = auction.duration;
    num_rows = data.streamArray.length;

    if (duration > 0)
    {
    var price_retail = $("#" + auction.id).attr("data-retail"); 

    var calc = auction.price.toFixed(2);
    var price_calc = calc.toString().replace(/\./g, ',');   
    $(".price" + auction.id).html(price_calc + "€");            
    $(".discount" + auction.id).html(discount + "%");

    if (timers.length < num_rows)
    timers.push([auction.id, auction.duration]);
    for(i in timers) 
    {                   
        if ($('.price' + timers[i][0]).data('curr_text') !== $('.price' + timers[i][0]).text()) 
        {
        $(".flashing" + timers[i][0]).toggle("highlight").toggle("highlight");
        timers[i][1] = auction.duration;        
        }
    }   
    $('.price' + auction.id).data('curr_text', $('.price' + auction.id).text());        
    } 
    else
    {
    $(".sold" + auction.id).html("<div class='sold'>SOLD</div>").fadeOut('fast').fadeIn('fast');            
    }
    });
});
function timerCount() {
    for(i in timers) {              
        if(timers[i][1] <= 0) {
        delete timers[i]; // if timer seconds is less than 1, delete it.
        } else {            
        timers[i][1]--; // else, decrease it by 1 second.
        duration_html = formatSeconds(timers[i][1]);        
        $(".duration" + timers[i][0]).html(duration_html);              
        }   
    }
}
setInterval(timerCount, 1000);

同样重要的是，如果拍卖实际结束，将出现一个名为 "SOLD" 的红色标志（请参阅套接字流结束）。但这也没有发生。计时器刚刚停止并转到00:00:00。所以它必须对 delete timers[i] 触发得太早的数组做一些事情，我猜？

附加信息：我忘了提到这些计时器重置为大约。每次用户出价需要 15-16 秒。所以数组 timers 存活了很长时间。这个数组每秒循环一次。

Answer 1

据我了解，您的计时器每 1 分钟被以下代码删除一次：

function timerCount() {
    for(i in timers) {              
        if(timers[i][1] <= 0) {
            delete timers[i]; // if timer seconds is less than 1, delete it.
        } else {            
            timers[i][1]--; // else, decrease it by 1 second.
            duration_html = formatSeconds(timers[i][1]);        
            $(".duration" + timers[i][0]).html(duration_html);              
        }   
    }
}

您要在哪些方面减少分钟数和小时数？

第二件事 - 你不能保证客户端和服务器上的时间是同步的，所以你应该在计时器中执行一些 AJAX 时间请求并以一定的间隔调整你的计时器。

正确调试 Javascript 问题？（很可能是客户端）

Debug a Javascript issue properly? (most likely client-side)

javascript

multidimensional-array

websocket

node.js

socket.io

正确调试 Javascript 问题？ （很可能是客户端）

Debug a Javascript issue properly? (most likely client-side)

javascript

multidimensional-array

websocket

node.js

socket.io

正确调试 Javascript 问题？（很可能是客户端）