/    Sign up×
Community /Pin to ProfileBookmark

How to set a delay of 1 second to this JS?

This timer works successfully, but I’d like to add a 1 second delay before it starts, here’s the code:

“`
var Clock = {
totalSeconds: 0,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val > 9 ? val : “0” + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;

document.getElementById(“min”).innerHTML = Math.floor(self.totalSeconds / 60 % 60);
document.getElementById(“sec”).innerHTML = pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},

reset: function () {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById(“min”).innerHTML = “0”;
document.getElementById(“sec”).innerHTML = “00”;
delete this.interval;
},
stop: function () {
clearInterval(this.interval);
delete this.interval;
}
};
document.getElementById(“start”).addEventListener(“click”, function () { Clock.start(); });
document.getElementById(“stop”).addEventListener(“click”, function () { Clock.stop(); });
“`

I tried adding this code at the bottom, but it only made the min/sec not display at all:

“`
document.getElementById(“start”).addEventListener(“click”, function () {
setTimeout(function () {
Clock.start();
}, 1000
});
“`

Any help is appreciated

to post a comment

6 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 26.2021 — Take a lot at the console, it should output an error message. There is a syntax error in your additional code, the closing bracket for setTimeout is missing:
``<i>
</i> document.getElementById("start").addEventListener("click", function () {
setTimeout(function () {
Clock.start();
}, 1000); // closing bracket was missing here
});<i>
</i>
``
Copy linkTweet thisAlerts:
@chrisjchrisjauthorAug 26.2021 — Many thanks again. I replaced my code with yours, and see no console errors, however, I see no delay. So, I changed it to 5000, but the clock still starts immediately upon 'start', with no delay, here's the latest js:

``<i>
</i>var Clock = {
totalSeconds: 0,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val &gt; 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
document.getElementById("min").innerHTML = Math.floor(self.totalSeconds / 60 % 60);
document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},

reset: function () {
Clock.totalSeconds = null;
clearInterval(this.interval);
// document.getElementById("min").innerHTML = "00";
document.getElementById("min").innerHTML = "0";
document.getElementById("sec").innerHTML = "00";
delete this.interval;
},
stop: function () {
clearInterval(this.interval);
delete this.interval;
}
};
document.getElementById("start").addEventListener("click", function () { Clock.start(); });
document.getElementById("stop").addEventListener("click", function () { Clock.stop(); });

document.getElementById("start").addEventListener("click", function () {
setTimeout(function () {
Clock.start();
}, 5000);
});<i>
</i>
`</CODE>
and here's some html:

<CODE>
`<i>
</i>&lt;button id="start" onclick="startRecording()"&gt;Start Recording&lt;/button&gt;
&lt;div class="flex-container"&gt;
&lt;&gt;span id="min"&gt;&lt;/span&gt;:&lt;span id="sec"&gt;&lt;/span&gt;
&lt;/div&gt;<i>
</i>
``


I look forward to help with solving this mystery. Thanks again
Copy linkTweet thisAlerts:
@SempervivumAug 26.2021 — This code:

`document.getElementById("start").addEventListener("click", function () { Clock.start(); });`

is still active above the code that starts the timer delayed. Remove it.

BTW: Sorry for not having replied to your other thread yet. I'm gonna look into my test files ASAP.
Copy linkTweet thisAlerts:
@cootheadAug 26.2021 — Hi there chrisjchrisj,

you could just change this...

<i>
</i>document.getElementById("start").addEventListener("click", function () { Clock.start(); });


...to this...

<i>
</i>document.getElementById("start").addEventListener("click", function () { setTimeout( function () { Clock.start();}, 1000 )}) ;


[i]coothead[/i]
Copy linkTweet thisAlerts:
@chrisjchrisjauthorAug 26.2021 — Success! Thanks for all the great help.

Much appreciated.

If you like to comment on this, related issue, it would be welcomed:

before clicking 'start' this colon is visible

:

And then upon clicking 'start' this displays

0:00

how can I not show the colon

:

until it all displays? like so:

0:00

Here's the html:

&lt;span id="min"&gt;&lt;/span&gt; : &lt;span id="sec"&gt;&lt;/span&gt;

thanks again
Copy linkTweet thisAlerts:
@cootheadAug 26.2021 — Hi there chrisjchrisj,

remove the colon from here...

<i>
</i>&lt;span id="min"&gt;&lt;/span&gt; : &lt;span id="sec"&gt;&lt;/span&gt;


...and add it as shown here...

<i>
</i> document.getElementById("min").innerHTML = Math.floor(self.totalSeconds / 60 % 60) + " : ";


[i]coothead[/i]
×

Success!

Help @chrisjchrisj spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...