Javascript setTimeout function with JQuery

Question

I'm new to JQuery and Javascript, I try to write a small setTimeout function but it seems not to work. Below is my code, can some one help out by pointing out what is wrong here.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>countdown</title>
  <script type="text/javascript" src="/jquery-2.1.4.js"></script>
  <script>
    $("#submit").click(function(){
        var timeVal = $("#input").val();
        var mainTimeVal = timeVal.split(":");
        var minute = parseInt(mainTimeVal[0]);
        var second = parseInt(mainTimeVal[1]);
        //console.log( second);

        setTimeout(function () {

            if (minute == 0 && second == 0) {
                alert("no time left");
            }
            else if (second !== 0) {
                second--;
            }
            else {
                minute--;
                second = 60;
            }
            second--;
        }, 1000);
    });
  </script>
</head>
 <body>
   <input type="text" id="input" value="25:23"/><br>
   <button type="button" id="submit" value="send"></button>
 </body>
</html>

Velimir Tchatchevsky · Accepted Answer · 2016-04-12 11:39:42Z

1

Your code executes on .click on the submit button - which means it only executes when you click the button. Also using setTimeout you are only running it once, and by the inner logic of the function it seems you want it to be ongoing. Substitute setTimeout to setInterval to keep it running.

`$("#submit").click(function(){ var timeVal = $("#input").val(); var mainTimeVal = timeVal.split(":"); var minute = parseInt(mainTimeVal[0]); var second = parseInt(mainTimeVal[1]); //console.log( second);

    setInterval(function () {

        if (minute == 0 && second == 0) {
            alert("no time left");
        }
        else if (second !== 0) {
            second--;
        }
        else {
            minute--;
            second = 60;
        }

        $('#input').val(minute + ':' + second);
    }, 1000);
});`

edited Apr 12, 2016 at 11:39

answered Apr 12, 2016 at 10:56

Velimir Tchatchevsky

2,8401 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pappy Over a year ago

i did but it seems not to work, if it works for you, can you pls produce a fiddle? @Velimir

Velimir Tchatchevsky Over a year ago

to be exact you want the timer to keep on counting after you've pressed submit and after time is lapsed you want to fire the alert correct?

Pappy Over a year ago

yes exactly, i did replace setTimeout with setInterval, the time counts down but the interval is " seconds but i want it to lapse by 1 second. @Velimir

Velimir Tchatchevsky Over a year ago

}, 100); this last parameter is in milliseconds so 100 means 1/10 of a second, use 1000 as it was before to accomplish a 1 second intervals

Velimir Tchatchevsky Over a year ago

sorry that last part I mistakenly saw in another answer, check out the edit - this function works now - tested

|

nisar · Accepted Answer · 2016-04-12 11:22:55Z

have to recursive to make call and call again....

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>countdown</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
 <body>
   <input type="text" id="input" value="25:23"/><br>
   <input type="button" id="submit" value="send"></input>
    <script>
    $("#submit").click(function(){
        var timeVal = $("#input").val();
        var mainTimeVal = timeVal.split(":");
        var minute = parseInt(mainTimeVal[0]);
        var second = parseInt(mainTimeVal[1]);
        //console.log( second);

        setTimeout(function () {

            rece();
            function rece(){
            if (minute == 0 && second == 0) {
                alert("no time left");
                console.log('no time left')
            }
            else if (second !== 0) {
                second--;
                console.log('second');
                rece();
            }
            else {
                minute--;
                second = 60;
                console.log('minute');
                rece();
            }
            second--;
            }

        }, 100);
    });
  </script>
 </body>
</html>

nisar · Accepted Answer · 2016-04-12 11:25:13Z

0

I've modified your code slightly and created a fiddle: JsFiddle

$("#submit").click(function(){
    var timeVal = $("#input").val();
    var mainTimeVal = timeVal.split(":");
    var minute = parseInt(mainTimeVal[0]);
    var second = parseInt(mainTimeVal[1]);

    setTimeout(function () {

        if (minute == 0 && second == 0) {
            alert("no time left");
        }
        else if (second !== 0) {
            second--;
        }
        else {
            minute--;
            second = 60;
        }
        second--;

        $('#input').val(minute + ':' + second);
    }, 1000);
});

edited Apr 12, 2016 at 11:25

nisar

1,0752 gold badges11 silver badges26 bronze badges

answered Apr 12, 2016 at 11:14

Nic

2272 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript setTimeout function with JQuery

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related