计时器计数太快

Question

I am creating a browser game and it will have a timer when the game starts. I have things working well but I am relatively new to Javascript so tips about the structure of the program are appreciated.

My problem is that my timer counts milliseconds where it should count secs and secs where it should count minutes.

timer.js

class Timer {           //timer works in s
    
    constructor() {
        this.curr = 0;
        this.initial_time = 0;
        this.t_status = false;
        this.curr_str;          //string for the current time
        this.old_timeStamp = 0;
        this.new_timeStamp = 0;
    }
    
    convert_to_str(s){  //converts time in secs to a mm:ss format
    
        console.log(s);
    
        let minutes = Math.trunc(s / 60);
        let secs = s % 60;
        let min_str;
        let secs_str;
        
        if (minutes < 10) {
            min_str = "0" + Math.trunc(minutes);
        } 
        else {
            min_str = Math.trunc(minutes).toString();
        }
        
        if (secs < 10) {
            secs_str = "0" + Math.trunc(secs);
        }
        else {
            secs_str = Math.trunc(secs).toString();
        }
        
        return min_str + ":" + secs_str;
        
    }
    
    set(s){         //sets time to sex seconds
        this.initial_time = s;
        this.curr = s;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    decrement(amount) {         //decrements the seconds timer
        this.curr = this.curr - amount;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    increment() {           //increments the seconds timer
        this.curr = this.curr + 1;
        this.curr_str = convert_to_str(this.curr);
    }
    
    clear() {
        this.curr = 0;
        this.curr_string = "";
        this.initial_time = 0;
    }
    
    get_time() {
        return this.curr_str;
    }   
    
    get_curr() {
        return this.curr;
    }   
}

main.js

function update(timeStamp) {
// Calculate the number of seconds passed since the last frame
timer.new_timeStamp = Date.now();
secondsPassed = (timer.new_timeStamp - timer.old_timeStamp) / 1000;

if (timer.t_status){
    console.log(secondsPassed);
    
    if (timer.get_curr() <= 0) {
        console.log("timer hit 0 stopping");
        timer.t_status = false;
    }
    else if ( secondsPassed >= 1 ){
        oldTimeStamp = Date.now();
        timer.decrement(1);
        
        console.log("changing timer to " + timer.get_time());
        
        $("#timer").html(timer.get_time());     //display current time string
    }
    
    console.log(timer.get_curr());
}

// Calculate fps
fps = Math.round(1 / secondsPassed);

// The loop function has reached it's end. Keep requesting new frames
window.requestAnimationFrame(update);
}

I made various changes to integer literals throughout the update function but no matter what numbers I change the counter counts the same? For example at first I had if (secondsPassed >= 1) but the program had the same behavior.

Please help:)

Answer 1

In the function convert_to_str , can you just change let minutes and let secs assignment to the following (note, milliseconds being the param u pass into convert_to_str function): let minutes = milliseconds / 60000; let secs = milliseconds / 1000 - 60 * minutes;

Answer 2

There are a few things wrong with the code. For one, the code is trying to use the timestamp parameter without understanding what it is. It is not not the same as a Date.now() object.

The easiest solution to this problem was to make my own timestamps in my timer class. After that. My code worked perfectly.

Timer.js

class Timer {           //timer works in ms
    
    constructor() {
        this.curr = 0;
        this.initial_time = 0;
        this.t_status = false;
        this.curr_str;          //string for the current time
        this.old_timeStamp = 0;
        this.new_timeStamp = 0;
    }
    
    convert_to_str(s){  //converts time in secs to a mm:ss format
    
        console.log(s);
    
        let minutes = Math.trunc(s / 60);
        let secs = s % 60;
        let min_str;
        let secs_str;
        
        if (minutes < 10) {
            min_str = "0" + Math.trunc(minutes);
        } 
        else {
            min_str = Math.trunc(minutes).toString();
        }
        
        if (secs < 10) {
            secs_str = "0" + Math.trunc(secs);
        }
        else {
            secs_str = Math.trunc(secs).toString();
        }
        
        return min_str + ":" + secs_str;
        
    }
    
    set(s){         //sets time to sex seconds
        this.initial_time = s;
        this.curr = s;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    decrement(amount) {         //decrements the seconds timer
        this.curr = this.curr - amount;
        this.curr_str = this.convert_to_str(this.curr);
    }
    
    increment() {           //increments the seconds timer
        this.curr = this.curr + 1;
        this.curr_str = convert_to_str(this.curr);
    }
    
    clear() {
        this.curr = 0;
        this.curr_string = "";
        this.initial_time = 0;
    }
    
    get_time() {
        return this.curr_str;
    }   
    
    get_curr() {
        return this.curr;
    }   
}

main.js

function update(timeStamp) {

// Calculate the number of seconds passed since the last frame
timer.new_timeStamp = Date.now();
secondsPassed = (timer.new_timeStamp - timer.old_timeStamp) / 1000;

if (timer.t_status){
    console.log(secondsPassed);
    
    if (timer.get_curr() <= 0) {
        console.log("timer hit 0 stopping");
        timer.t_status = false;
    }
    else if ( secondsPassed >= 1 ){
        timer.old_timeStamp = Date.now();
        timer.decrement(1);
        
        console.log("changing timer to " + timer.get_time());
        
        $("#timer").html(timer.get_time());     //display current time string
    }
    
    console.log(timer.get_curr());
}

// Calculate fps
fps = Math.round(1 / secondsPassed);

// The loop function has reached it's end. Keep requesting new frames
window.requestAnimationFrame(update);
}