Working with DOM but not with Jquery :(

hi,

i have this piece of code (a countdown time) that is working in JS DOM

var mins = 1;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    
    
    setTimeout("Decrement()",1000); 

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("time-left").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout("Decrement()",1000);

however, when I "translate"it into Jquery, it is not behaving anymore

$(document).ready(function(){
    var mins = 1;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    
    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        let time = currentMinutes + ":" + currentSeconds; 
      $("#time-left").text(time);
        if(secs !== -1) setTimeout(Decrement(),1000);
    }
      setTimeout(Decrement(),1000); 
})

I have also noticed that, in JS, the behaviour of the setTimeout function inside the Decrement function changes (of course) if I use quotes around Decrement(), that is, if i write

setTimeout("Decrement()", 1000) // the target element will display the minute (but the countdown won't start)

if i write

setTimeout(Decrement(), 1000) // the target element will display 0:00 (and of course the countdown won't start)

can someone clarify why I do not have the same behaviour in DOM vs Jquery ?
thanks

hey @francesca.giammichel ,

setTimeout is only supposed to run once you should change it to setInterval if you want a count down.

$(document).ready(function(){
    var mins = 1;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    
    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        let time = currentMinutes + ":" + currentSeconds; 
      $("#time-left").text(time);  
    }
  if(secs !== -1) setInterval(Decrement,1000);
     
})

I actually had it working :slight_smile:
if you see in the function body, the function is calling itself inside the function body

the problem was not due to Jquery but the use of quotes
…so I would be grateful if someone could give me an explanation :slight_smile:

     $(document).ready(function(){
    var mins = 1;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    
    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        let time = currentMinutes + ":" + currentSeconds; 
        $("#time-left").text(time);
        if(secs !== -1)   {
            setTimeout(Decrement,1000);   //the problem was HERE        }
    }
      setTimeout(Decrement(),1000); 
})
      

your problem is your calling the Decrement function inside the timeout instead of passing it in which will execute the function and only run once , you want to remove the parentheses to pass it in like this setTimeout(Decrement,1000);

$(document).ready(function(){
    var mins = 1;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    
    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        let time = currentMinutes + ":" + currentSeconds; 
      $("#time-left").text(time);
        if(secs !== -1) setTimeout(Decrement,1000);
    }
      setTimeout(Decrement,1000); 
})

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.