I have a fairly complex page with lots of ajax calls and subsequent dom manipulation. On one particular call it sets an interval with a time limit(essentially a timer). I have set up clearInterval() everywhere and even in the function but in very particular use cases(it is complex and I can't determine the exact cause and steps to reproduce the defect) .
$(function() {
window.timer_interval;
// ...
})
function timer()
{
var current = 0;
time_limit = 60;
window.timer_interval = setInterval(function() {
minute = ( "0" + Math.round(Math.floor((time_limit - current)/60))).slice(-2);
seconds = ("0" + ((time_limit - current)%60)).slice(-2);
$('#timer').html(minute + ":" + seconds);
if (current >= time_limit) {
clearInterval(window.timer_interval);
window.timer_interval = false;
}
current = current + 1;
}, 1000);
}
I have used firbug to detect the value for window.timer_interval , it is false and even the condition is satisfied.One thing might be that that a couple of image transfers fail
(this is possible application behaviour with code written to gracefully degrade). I am developing in Mozilla.
My guess is that you're setting the interval, and then setting the interval again without clearing it first, so that whatever was set previous will run forever.
If I am right adding a check to clear the interval before setInterval will correct the problem. I've created a function to the code below that will take place when you call setInterval.
// starts an interval function, making sure to cancel one that is previously running
function startSharedInterval(func) {
if (window.timer_interval) {
clearInterval(window.intervalID);
window.timer_interval = 0;
}
window.timer_interval = setInterval(func, 1000);
};
// ... in timer()
startSharedInterval(function () {
minute = ( "0" + Math.round(Math.floor((time_limit - current)/60))).slice(-2) ;
// ... rest of code
});
If you only have one timer, then you can avoid using global scope and take advantage of using closures so that the timer is always cleared.
In the code below, interval_id is created in the parent timer() function. This will be available to the inner anonymous function to clear when its execution after 60 is completed. You may have multiple instances running simultaneously this way.
function timer() {
var current = 0;
var time_limit = 60;
var interval_id = setInterval(function () {
minute = ("0" + Math.round(Math.floor((time_limit - current) / 60))).slice(-2);
seconds = ("0" + ((time_limit - current) % 60)).slice(-2);
$('#timer').html(minute + ":" + seconds);
if (current >= time_limit) {
clearInterval(interval_id);
}
current = current + 1;
}, 1000);
}
Related
I am trying to update information from a weather service on my page. The info should be updated every hour on the hour. How exactly do I go about calling a function on the hour every hour?
I kind of had an idea but I'm not sure of how to actually refine it so it works...
What I had in mind was something like creating an if statement, such as: (pseudo code)
//get the mins of the current time
var mins = datetime.mins();
if(mins == "00"){
function();
}
You want to check out setInterval: https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
It's a little hard to tell what you're trying to call with your code, but it would be something in the form of:
function callEveryHour() {
setInterval(yourFunction, 1000 * 60 * 60);
}
If you want it every hour, try something like:
var nextDate = new Date();
if (nextDate.getMinutes() === 0) { // You can check for seconds here too
callEveryHour()
} else {
nextDate.setHours(nextDate.getHours() + 1);
nextDate.setMinutes(0);
nextDate.setSeconds(0);// I wouldn't do milliseconds too ;)
var difference = nextDate - new Date();
setTimeout(callEveryHour, difference);
}
Now, this implementation checks the time once, sets the delay (or calls the function immediately), and then relies on setInterval to keep track after that. An alternative approach may be to poll the time every x many seconds/minutes, and fire it .getMinutes() == 0 instead (similar to the first part of the if-statement), which may sacrifice (marginal) performance for (marginal) accuracy. Depending on your exact needs, I would play around with both solutions.
Here is what should work (JSFiddle):
function tick() {
//get the mins of the current time
var mins = new Date().getMinutes();
if (mins == "00") {
alert('Do stuff');
}
console.log('Tick ' + mins);
}
setInterval(tick, 1000);
What you probably want is something like that:
var now = new Date();
var delay = 60 * 60 * 1000; // 1 hour in msec
var start = delay - (now.getMinutes() * 60 + now.getSeconds()) * 1000 + now.getMilliseconds();
setTimeout(function doSomething() {
// do the operation
// ... your code here...
// schedule the next tick
setTimeout(doSomething, delay);
}, start);
So basically the first time the user get the access, you need to know what is the delay in millisecond to the next "hour". So, if the user access to the page at 8:54 (with 56 seconds and 123 milliseconds), you have to schedule the first execution after around 3 minutes: after the first one is done, you can call it every "hour" (60 * 60 * 1000).
Repeat at specific minute past the hour
This counter is a little bit more versatile; it allows to perform a task repeatedly always at the same minute past the hour (e.g. 37 minutes past the hour), and this with up to millisecond precision.
The precision of this timer is derived from its recursion.
At every recursion, the millisecond time to the next minute gets recalculated. This prevents time lag over long periods.
The % sign refers to the modulo operator.
function minuteCount(minutesAfterHour) {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
waitUntilNextMinute = setTimeout(minuteCount, 60000 - seconds * 1000 - milliseconds);
if(minutes % 60 === minutesAfterHour) {
doSomethingHourly();
}
}
minuteCount(37);
Finally, timers are best kept away from the main thread. They are best run from within a web worker, as explained here.
This works perfectly with unfocused tabs in desktop browsers.
However, dedicated web workers on Chrome for Android are put to sleep about 5 minutes after moving the main client to the background.
EDIT: Oops, I didn't see the " o' clock" things, so I edit my answer :
var last_execution = new Date().getTime();
function doSomething(force){
var current_time = new Date().getTime();
if (force || (current_time.getMinutes() == 0)
{
last_execution = current_time;
// something
// ...
}
setTimeout(doSomething(false), 1000);
}
// force the first time
doSomething(true);
// ... call your func now
let intervalId;
let timeoutId = setTimeout(() => {
// ... call your func on end of current hour
intervalId = setInterval(() => {
// ... call your func on end of each next hours
}, 3600000);
}, ((60 − moment().minutes()) × 60 × 1000) - (moment().second() * 1000));
Here is my pair of setIntervalWithDelay and clearIntervalWithDelay that one can use like this:
let descriptor = setIntervalWithDelay(callback, 60 * 60 * 1000, nextHourDelay)
And when you are done with it:
clearIntervalWithDelay(descriptor)
Here is my implementation of the functions:
const setIntervalWithDelay = (callback, interval, delay = 0) => {
let descriptor = {}
descriptor.timeoutId = setTimeout(() => {
if(!descriptor.timeoutId){
return
}
descriptor.timeoutId = null
callback()
descriptor.intervalId = setInterval(callback, interval)
}, delay)
return descriptor
}
export const clearIntervalWithDelay = (descriptor) => {
if(!isObject(descriptor) || (!descriptor.timeoutId && !descriptor.intervalId)){
console.warn("clearIntervalWithDelay: Incorrect descriptor. Please pass an object returned by setIntervalWithDelay. Skipping this call.")
return
}
if(descriptor.timeoutId){
clearTimeout(descriptor.timeoutId)
descriptor.timeoutId = null
console.log("clearIntervalWithDelay: stopped during delay.")
}
if(descriptor.intervalId){
clearInterval(descriptor.intervalId)
descriptor.intervalId = null
console.log("clearIntervalWithDelay: stopped during interval repeat.")
}
}
One example of using dayjs to get the delay for the next hour:
let nextHour = dayjs().second(0).millisecond(0).add(1, "hour")
let nextHourDelay = nextHour.diff(dayjs())
Need to display current time in JS with the given functions.
Internet searches showed JS using Date() and Time() for gathering the info, but the date and time are not showing up in the HTML when run it.
"use strict";
var $ = function(id) { return document.getElementById(id); };
var displayCurrentTime = function() {
var now = new Date(); //use the 'now' variable in all calculations, etc.
var Date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var hours = now.getHours()+ ":" + now.getMinutes() + ":"
+ now.getSeconds();
//Ok, problem now is getting HTML to call it up?
};
var padSingleDigit = function(num) {
if (num < 10) { return "0" + num; }
else { return num; }
};
window.onload = function() {
// set initial clock display and then set interval timer to display
// new time every second. Don't store timer object because it
// won't be needed - clock will just run.
};
Instructor's instructions:
"Note that to convert the computer’s time from a 24-hour clock to a 12-hour clock, first check to see if the hours value is greater than 12. If so, subtract 12 from the hours value and set the AM/PM value to “PM”. Also, be aware that the hours value for midnight is 0.
The starter project has four functions supplied: the $ function, the start of a displayCurrentTime() function, a padSingleDigit() function that adds a leading zero to single digits, and the start of an onload event handler.
In the displayCurrentTime() function, add code that uses the Date object to determine the current hour, minute, and second. Convert these values to a 12hour clock, determine the AM/PM value, and display these values in the appropriate span tags.
Then, in the onload event handler, code a timer that calls the displayCurrentTime() function at 1 second intervals. Also, make sure that the current time shows as soon as the page loads. (some comments have been included in the starter code to guide you on where to place things)."
In order to grap an html element you first need one. So i made a tag with an id of "clock". I then set an interval, running every 1000 milis (1 second) to give me the correctly formatted time.
clock = document.getElementById("clock");
let hours, minutes, seconds;
function checkDigits(num, hours) {
if (num < 10) {
return "0" + num
} else {
if (hours) {
return num - 12
}
return num
}
}
function updateTime() {
date = new Date();
hours = checkDigits(date.getHours(), true)
minutes = checkDigits(date.getMinutes())
seconds = checkDigits(date.getSeconds())
clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}
window.onload = function() {
setInterval(function() {
updateTime()
}, 1000);
}
<h1 id="clock"></h1>
I'm trying to figure out javascript ... Currently, I am using a countdown timer. I'd like to add/subtract 1 minute when the left or right key is pressed.
I tried the following:
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
current = parseInt($('#time2').textContent);
newtime = current + 60;
countdown_start(newtime)
break;
case 39: // right
alert('right');
break;
default: return;
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
But it has some really funky reaction ... and starts counting down twice...one with a NaNaNaNa...
Any help would be appreciated. Thanks!
.background-countdown
#start-game
= submit_tag 'Play', id: "start"
#time2
60:00
.test
asd
-##start-time
-# =text_field_tag 'start-time-input', "60:00", id: "start-time-input"
#hint-text.white-text
:javascript
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var countdown = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
$('#start').show()
$('#start-time').show()
clearInterval(countdown)
}
}, 1000);
}
function countdown_start(sixtyMinutes = 3600) {
$(document).ready(function () {
display = document.querySelector('#time2');
startTimer(sixtyMinutes, display);
});
}
$('#start').click(function() {
countdown_start()
$('#start').hide()
event.preventDefault();
});
function get_text(){
var feedback = $.ajax({
type: "POST",
url: "/jquery/update_text",
async: false
}).complete(function(){
setTimeout(function(){get_text();}, 1000);
}).responseText;
}
$(function(){
get_text();
});
The problem here might be, that you are using clearInterval right, but you have not correctly saved the returned ID value of the setIntervall method.
Please have a look at the w3schools.com page:
http://www.w3schools.com/jsref/met_win_clearinterval.asp
They write in a note under the definition:
Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method
You save your ID locally so maybe you shouldn't do that.
Instead use a global variable, which just means that you declare it outside the functions section and use that reference over and over again, BUT what you also want to change is your order. First you are setting an interval and later in the startMethod-function you clear that same interval. I think if you change the order and make the variable global, it should work.
I am making a countdown timer that should be reseting and starting anew every 10 seconds.
This is the code I came up with by now:
function count(){
var end_date = new Date().getTime()+10*1000;
setInterval(function(){
var current_date = new Date().getTime();
var seconds_left = parseInt((end_date - current_date) / 1000);
document.getElementById("countdown").innerHTML = seconds_left + " seconds ";
}, 1000);
}
setInterval(function(){count()}, 10*1000);
It is supposed to function as follows:
+ I set interval that will restart count() every 10 seconds.
+ count() defines end_date - a date 10 seconds from now.
+ then count() sets interval that will restart every 1 second.
+ every 1 second seconds_left variable is changed according to how current_date changed with respect to end_date.
+ as soon as seconds_left becomes 0, setInterval from step 1 fires and starts count() anew.
Which step am I implementing the wrong way? Do I misunderstand the functioning of setInterval()?
Here is my JsFiddle: http://jsfiddle.net/sy5stjun/ .
My guess is that each call is in its own new object and you get multiple instances of itself fighting ever 10 seconds.
Using your approach using date objects here is a possible re-write:
var tmr = null;
var time;
function bigInterval() {
clearInterval(tmr);
time = (new Date()).valueOf() + (10 * 1000);
smallInterval();
tmr = setInterval(smallInterval, 500);
}
function smallInterval() {
var cur = (new Date()).valueOf();
var seconds_left = parseInt((time - cur) / 1000);
document.getElementById("countdown").innerHTML = seconds_left + " seconds";
}
bigInterval();
setInterval(bigInterval, 10*1000);
In the above code I've updated the small timer to be 500ms instead of 1000ms as it won't exactly line up with the system clock at 1000 and you get visual jumps in the numbers.
If exact timing isn't 100% important then here is a possible shorter method:
var t = 10;
setInterval(function() {
document.getElementById("countdown").innerHTML = t + " seconds";
t--;
if (t <= 0) {
t = 10;
}
}, 1000);
There are a few things going on, here. You're not specific why you have to set another interval inside your loop, but there are a lot easier ways to accomplish what you're going for. Another approach follows:
HTML:
<!-- string concatenation is expensive in any language.
Only update what has to change to optimize -->
<h1 id='countdown'><span id="ct"></span> seconds </h1>
JS:
// For one thing, grabbing a new reference to the
// dom object each interval is wasteful, and could interfere with
// timing, so get it outside your timer, and store it in a var scoped
// appropriately.
var ct = document.getElementById("ct");
// set your start
var ctStart = 10;
// set your counter to the start
var ctDown = ctStart;
var count = function() {
// decrement your counter
ctDown = ctDown - 1;
// update the DOM
ct.innerHTML = ctDown;
// if you get to 0, reset your counter
if(ctDown == 0) { ctDown = ctStart; }
};
// save a reference to the interval, in case you need to cancel it
// Also, you only need to include a reference to the function you're
// trying to call, here. You don't need to wrap it in an anonymous function
var timer = window.setInterval(count, 1000);
My jsFiddle available for tinkering, here: http://jsfiddle.net/21d7rf6s/
I have a page where I want to have "age counters" for bids put in by users. The number of users will vary from situation to situation, so that needs to be taken into consideration. I wrote this:
function timer(i) {
// this selects a 'hh:mm:ss' timestamp
if ($("#time_0" + i).text() !== "") {
var now = new Date();
var date = now.toDateString();
var tStamp = new Date(date + "," + $("#time_0" + i).text());
var diff = now - tStamp;
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor((diff / 1000) % 60);
if (mins < 10) {
mins = "0" + mins;
}
if (secs < 10) {
secs = "0" + secs;
} else if (secs == 60) {
secs = "00";
}
$("#user" + i + "-t").text(mins + ':' + secs);
}
}
$(document).ready(function() {
//
var ids = [];
$("td[id^='time_0']").each(function() {
var i = ($(this).attr("id")).slice(-1);
ids.push(i);
});
for (i in ids) { // in my example ids = [1,2,3]
setInterval(function() {timer(i);}, 1000);
}
});
The timer itself functions just as I want it to, but only for user #2 (the middle one). I thought that if I encountered this problem, it would be either the first or last user in the list that had a working timer, but I'm getting blank cells for users #1 and #3.
Does anyone have any ideas as to how I can fix this? Thank you for your time.
==Edit==
I made a bare-bones jsfiddle
In your version loop never went past first reference, which was timer(0), because you called your function with timer(i), which was calling the first key in the array ids. When you have setInterval in a loop it will keep looping the first setInterval until that is terminated. By putting that i in an anonymous function, each setInterval gets fired.
$(document).ready(function () {
var ids = [];
$("td[id^='time_0']").each(function () {
var i = $(this).attr("id").slice(-1);
ids.push(i);
});
for (i in ids) {
(function(i) { // i needs to be stored into a anonymous function otherwise it gets overwritten
setInterval(function() {
timer(ids[i]); // calling just timer(i) would use array keys, not the actual values - ids[i] means: "give me the value of the key of i"
}, 1000)
})(i);
}
});
Made changes to your Fiddle