could you please help me how to fix this? I want to send just one command, but to be as accurate as possible (on milliseconds).
This is the part I need to fix:
document.getElementById("arrTime").onclick = function () {
clearInterval(attInterval);
let time = document.getElementsByClassName("relative_time")[0].textContent.slice(-8);
input = prompt("Set Arrival Time", time);
inputMs = parseInt(prompt("Set the milliseconds", "500"));
delay = parseInt(delayTime) + parseInt(inputMs);
let arrivalTime;
arrInterval = setInterval(function () {
arrivalTime = document.getElementsByClassName("relative_time")[0].textContent;
if (arrivalTime.slice(-8) >= input) {
setTimeout(function () { document.getElementById("troop_confirm_submit").click(); }, delay);
}
}, 5);
document.getElementById("showArrTime").innerHTML = input + ":" + inputMs.toString().padStart(3, "0");
document.getElementById("showSendTime").innerHTML = "";
};
Now, there is an "if statement" to perform action at arrivalTime.slice(-8) >= input (so for example 19:24:30), but it is sending requests every 5ms. So over that one second time, it sends 200 requests to the server.
I don´t want to change those 5ms, as I need to have it as accurate as possible, but I want to break the script, freeze it or sleep it for 1 second once the command is performed. So something like: setTimeout(function () { document.getElementById("troop_confirm_submit").click(); Sleep 1 second }, delay);
Anyone who can help, please?
I'd advise to break up the functions as to manage the interval a little easier
document.getElementById("arrTime").onclick = function() {
clearInterval(attInterval);
let time = document.getElementsByClassName("relative_time")[0].textContent.slice(-8);
input = prompt("Set Arrival Time", time);
inputMs = parseInt(prompt("Set the milliseconds", "500"));
delay = parseInt(delayTime) + parseInt(inputMs);
startInterval(input, delay)
document.getElementById("showArrTime").innerHTML = input + ":" + inputMs.toString().padStart(3, "0");
document.getElementById("showSendTime").innerHTML = "";
};
function startInterval(input, delay) {
arrInterval = setInterval(function() {
let arrivalTime = document.querySelector(".relative_time").innerText;
if (+arrivalTime.slice(-8) >= +input) {
clearInterval(arrInterval); // pause the interval
setTimeout(() => {
startInterval(input, delay)
}, 1000 * 60); // restart the interval in 1 minute
setTimeout(() => {
document.querySelector("#troop_confirm_submit").click();
}, delay);
}
}, 5);
}
Related
I am working on knockout js.
In that i have a recursive function which executes a function every minute. for that am using a timer every 60 sec it will execute also same will be reflecting in the UI also.
In my case, if i try to assign or initialize a timer value(observable) which is inside a loop, it doesn't reflecting instead of reflecting it is added to the pipeline and that much time loop is running simultaneously.
In that case i want to kill the loop and again want to restart every time i am changing the timer value.
timerInSec=60;
var loop = function () {
if (this.timer() < 1) {
myFunction()
this.timer(this.timerInSec - 1);
setTimeout(loop, 1000);
} else {
this.timer(this.timer() - 1);
setTimeout(loop, 1000);
}
};
loop();
Here is my solution. Please check.
timerInSec = 60;
const Loop = (function () {
let timer = 0;
let timerId = -1;
const myFunction = function () {
console.log('finished');
}
const fnLog = function (tm) {
console.log('current time = ', tm);
}
const fnProc = function () {
timerId = setTimeout(myFunction, 1000 * timer);
}
return {
start: function (tm = 60) {
this.stop();
timer = tm;
fnProc();
},
stop: function () {
if (timerId !== -1) {
clearTimeout(timerId);
timerId = -1;
}
}
}
})();
Loop.start(timerInSec);
setTimeout(() => {
Loop.start(timerInSec);
}, 500);
I want to ping a server for response every 3 seconds for the first 6 seconds, after that I want to increase the interval time to 5 seconds till i get the response. I did the first part, I'm trying to solve the next 5 seconds ping
var firstPing = 3000,
pingStop = 6000,
pingForever = 5000;
var ping = setInterval(function() { execute() }, firstPing);
setTimeout(function() {clearInterval(ping)}, pingStop);
setInterval(function() {execute()}, pingForever);
function execute() {
console.log('hello: ' + new Date().getSeconds());
// After successful response, clearInterval();
}
Might it be simpler to just call execute() every 1 second and only have execute do something when an incrementing counter variable is a certain value?
var ping = setInterval(function() { execute() }, 1000);
let v = 0;
function execute() {
v++;
if(v==3 || v==6 || (v>6 && v%5 == 1))
console.log('hello: ' + new Date().getSeconds());
// After successful response, clearInterval();
`
Here is something that manages the transition of the ping from 3 to 5 secs.
const firstPing = 3000,
pingStop = 6000,
pingForever = 5000;
let currentPing = 0;
let ping = setInterval(function() { execute() }, firstPing);
function execute() {
console.log('hello: ' + new Date().getSeconds());
// After successful response, clearInterval();
if(++currentPing >= 2 ) {
clearInterval(ping);
ping = setInterval(() => execute(), pingForever);
}
}
You can use count variable, you have firstPing of 3sec. Instead of clearing the interval you can update the firstPing with pingForever.
var firstPing = 3000,
pingStop = 6000,
pingForever = 5000;
let count = 0;
var ping = setInterval(() => {
execute();
firstPing = (count === 2) ? pingForever : firstPing;
count++;
console.log(count, firstPing);
}, firstPing);
function execute() {
// console.log('hello: ' + new Date().getSeconds());
}
I would just use setTimeout for simplicity.
var found = null;
function tryRequest() {
if (found) return;
// send request
// in successful response, set 'found' to 'true'
setTimeout(tryRequest, found == null ? 3000 : 5000);
found = false;
}
setTimeout(tryRequest, 3000);
i made this countdown timer (not really perfect), and i'm confused about something.
How can i get minInterval and secInterval datas on min and sec ?
In fact i'm trying to save seconds and minutes in sessionStorage to save datas. If user refresh the page, timer still continue.
I need to do this countdown in OOP.
var myTimer = {
minInterval: 19,
secInterval: 59,
min_: i want data of minInterval
sec_: i want data of secInterval
timerCountDownStart: function () {
if (myTimer.min_ <= -1) {
myTimer.min_ = myTimer.minInterval;
}
document.getElementById("count-timer").innerHTML = myTimer.min_ + " minute(s) et " + myTimer.sec_-- + " seconde(s) avant l\'expiration de votre réservation";
if (myTimer.sec_ <= -1) {
myTimer.min_--;
myTimer.sec_ = myTimer.secInterval;
myTimer.myStopFunction();
$('#title-reservation').text('Votre réservation a expirée');
$('#count-timer').fadeOut(1000);
sessionStorage.clear('nom_station');
}
},
myStopFunction: function () {
clearInterval();
sessionStorage.clear('nom_station');
$('#count-timer').fadeOut(1000)
}
};
Thanks :)
This simplified code shows you the basics of how to create a timer object that counts down in seconds and store the value in a sessionStorage.
It's not really OOP though! You can only have one myTimer and you shouldn't call myTimer.start() twice :)
var myTimer = {
time:10,
intervalID:0,
start: () => {
console.log("starting!!!");
// check if there is a starttime in sessionstorage
let storedTime = sessionStorage.getItem('time');
myTimer.time = (storedTime > 0) ? storedTime : 10;
// start countdown
myTimer.intervalID = setInterval(()=>myTimer.count(), 1000);
},
count: () => {
myTimer.time--;
console.log("time is " + myTimer.time);
// store count in session
sessionStorage.setItem('time', myTimer.time);
// check if below 0
if (myTimer.count < 0) {
myTimer.myStopFunction();
}
document.getElementById("count-timer").innerHTML = myTimer.time + " seconds left";
},
myStopFunction: () => {
clearInterval(myTimer.intervalID);
sessionStorage.clear();
}
};
myTimer.start();
I'm working on a little "web app" for a quiz.
Each slide has got a certain amount of time to be answered (or 0 to infinite time).
I find JS here to do the countdown:
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function () {},
counterEnd = options.onCounterEnd || function () {};
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
var myCounter = new Countdown({
seconds: timetogo, // number of seconds to count down
onUpdateStatus: function (sec) {
elapsed = timetogo - sec;
$('.progress-bar').width(((elapsed / timetogo) * 100) + "%");
}, // callback for each second
onCounterEnd: function () {
//alert('counter ended!');
} // final action
});
myCounter.start();
I made a jsfiddle here :
https://jsfiddle.net/mitchum/kz2400cc/2/
But i am having trouble when you go to the next slide, the progress bar "bump".
after looking into "live source panel from chrome" I saw it's like the first "counter" is not stopped and still runs.
Do you have any tips or hint to help me to solve my bug ?
Thanks
You must pay attention to the scope of the variables. I change the "var myCounter" under document ready in "var myCounterFirst". Check the updated JSFiddle.
var timetogoFirst = $('.current').attr("data-time");
var myCounterFirst = new Countdown({
seconds: timetogoFirst, // number of seconds to count down
onUpdateStatus: function (sec) {
elapsed = timetogoFirst - sec;
$('.progress-bar').width(((elapsed / timetogoFirst) * 100) + "%");
}, // callback for each second
onCounterEnd: function () {
alert('counter ended!');
} // final action
});
myCounterFirst.start();
I know that most probably such question has been requested several times but I have a need to show a popup or message or whatelse when a javascript function is triggered and hide it at the end.
See this simple js fiddle
That's the HTML code:
<div id='message'>Default message</div>
<input type='button' onclick='Run();' value='start'>
the div 'message' has to contain a simple text like "running" or "please wait" or ...
That's the JS function that took (delay) 3 seconds:
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
while (true) {
current = new Date().getTime();
if ( (start + delay) < current) {
break;
}
}
$( '#message' ).text('Done');
}
The expected behaviour is that the '#message' div contains "Please wait 3 seconds..." before to enter in the loop and "Done" string only at the end.
But that's not.
Can anyone explain me (most probably "again") why or suggest a link where to find an answer?
The JS event loop is too busy running while (true) {} to handle a DOM repaint.
Use setInterval, setTimeout, or requestAnimationFrame to trigger the next test of the time instead of a loop.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
setTimeout(whenDelayIsOver, 50);
function whenDelayIsOver() {
if ( (start + delay) < current) {
$( '#message' ).text('Done');
} else {
setTimeout(whenDelayIsOver, 50);
}
}
}
… or just use setTimeout in the first place.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
setTimeout(whenDelayIsOver, delay);
function whenDelayIsOver() {
$( '#message' ).text('Done');
}
}
Try this http://jsfiddle.net/aamir/23ZFY/11/
function Run() {
var secs = 3;
$('#message').text('Please wait '+ secs +' seconds...');
var timer = setInterval(function () {
if (secs == 1) {
clearTimeout(timer);
$('#message').text('Done');
return;
}
secs--;
$('#message').text('Please wait ' + secs + ' seconds...');
}, 1000);
}
The browser's display is only updated when the function completely finishes running.
You can run the second lot of code asynchronously by using setTimeout.
function Run() {
$('#message').text('Please wait 3 seconds...');
setTimeout(
function () {
var start = new Date().getTime();
while (true) {
current = new Date().getTime();
if ((start + 3000) < current) {
break;
}
}
$('#message').text('Done');
},0);
}
You have a very tight loop (while(true)...) which doesn't allow the UI to update at all. What you can do instead is this:
function Run() {
var delay = 3000; //-- 3 seconds
$('#message').text('Please wait ' + (delay/1000) + ' seconds...');
setTimeout(function () {
$('#message').text('Done');
}, delay);
}
Basically, set the "wait message" initially and use the setTimeout function to update the message again after 3 seconds.
Updated fiddle.