Develop Reference

setInterval triggering faster than set

I am trying to build a dinosaur running game in React much like google chrome's.
My idea is that I will run a function at the exact moment the object is suppose to hit the dinosaur, around 3 seconds
function check4Death() {
if (playerClass !== '') {
console.log('safe')
}
else {
console.log('nope')
clearInterval()
}
}
setInterval(check4Death, 3000)
This function checks to see if the player is currently in the air
As my method of jumping is adding and then removing a class from my playerClass object
function Jump() {
setPlayerClass('jump')
setTimeout(() => {
setPlayerClass('')
}, 500);
}
Instead of the function telling me either safe or nope every three seconds, I get this
I am very confused as to why this is happening, I have a link to my full code here

Bookmarklet to run different functions depending on times clicked

Is it possible to design a bookmarklet to run different scenarios based on the number of times it was clicked?
I tried to do this via addEventListener when clicked and setTimeout(main, 5000), then counting the eventListeners' fires when main() finally runs. It works after a fashion, but there are two problems with this approach:
Clicks are caught and counted if the bookmarklet is invoked as a link on a webpage, but not, of course, if clicked on Bookmark Bar. This is unresolvable, I believe; the number of clicks has to be evaluated when the last main function runs somehow…
Say, I clicked the bookmarklet 3 times; main() runs 3 times spaced 5000ms apart. How do I make it run only the once? And only the last one at that, to resolve the problem in #1? The way I do it is so cumbersome as to be all but useless, and is prone to racing besides.
The main question though is that I feel my approach, even if viable, is far too clumsy. I'm aware I can use, say, prompt() and have the user enter the number of a scenario, or render a menu and click a required scenario, but is there a way to do that based simply on the number of clicks / snippet runs within a given time frame?

Check if this is what you need:
javascript: (() => {
window.bmClicked = window.bmClicked ? window.bmClicked + 1 : 1;
clearTimeout(window.bmTimeout);
window.bmTimeout = setTimeout(() => {
console.log('window.bmClicked: ', window.bmClicked);
window.bmClicked === 1 && functionOne();
window.bmClicked === 2 && functionTwo();
window.bmClicked === 3 && functionThree();
window.bmClicked = null;
}, 500);
function functionOne() {
console.log('functionOne');
}
function functionTwo() {
console.log('functionTwo');
}
function functionThree() {
console.log('functionThree');
}
})();

Code doesn't run in order? Updates to DOM happen all at once?

I'm having a bit of trouble with running my code in order. Basically I have a function that hides an element, console log a message then run another function that makes a slow and massive change to the DOM.
Ideally the hide occurs first to signal the user response has been made, then they can deal with the lag for a few seconds as everything refreshes. But right now, the console gets logged first, then all the changes happen at once after a few seconds. So the hide occurs together with the updates.
If it makes any difference, the update function creates and destroys several div elements, then starts creating JSXGraphs and updating functions, points, etc on those graphs.
check_answer(answer_input) {
if (this.ans == answer_input) {
$("#answer-card-section").hide();
console.log("CORRECT!");
current_question.update();
return true;
}
else {
return false;
}
}
Thanks!

When executing long running functions in JS the calls to render the UI can be blocked. In some cases it can also prevent the previous operation from visibly updating the DOM, which is what you're seeing here.
The simple fix is to put the update() call within a timeout with a short delay. This will allow the hide() to update the DOM first. Try this:
function check_answer(answer_input) {
if (this.ans == answer_input) {
$("#answer-card-section").hide();
setTimeout(function() {
current_question.update();
}, 25);
return true;
}
else {
return false;
}
}

It seems that you need to execute a callback function after all the hide-operations are finished. One way to achieve this in jQuery is to use $.when().done:
function check_answer(answer_input) {
if (this.ans == answer_input) {
$.when( $("#answer-card-section").hide() ).done(function() {
current_question.update();
});
return true;
} else {
return false;
}
}
But beware, in general the return of this function will happen before current_question.update() has been finished.

Continue function after page reload?

function test() {
console.log("Hi");
setTimeout(function() {
location.reload();
console.log("Hi2");
}, 1000);
}
test();
Hi everyone i wonder if there is any chance that i can continue function/save progress of a function? What do i exactly mean with that? Well look at the code above. As you can see i have simple console.log, after it i setup a timeout for 1 sec, and i am reloading a page. I'ts clear that the console.log after page reload won't work, and here is my question. Is it possible to run that console.log after page reload, without triggering this first console.log?

Here is one way, I would have done it: using localStorage
localStorage.messages = []; //define an array to store all your messages
localStroage.messages.push('Hi');
localStroage.messages.push('Hi 2');
// don't call that line more than once, otherwise it will wipe out existing data
function test() {
check_messages();
setTimeout(function() {
location.reload();
check_messages();
}, 1000);
}
function check_messages() {
if (localStorage.messages.length>0) {
alert(localStorage.messages[0]); //display the message
localStorage.messages.splice(0,1); //get rid of it
}
}
test();

Is there a Time Limit for a JS script to run on the Browser Console or FireBug Console?

I'm using the firebug console to test a script...
Right at the start of my script i have an option on the number of times i want the script to run!
My problem is:
The script stops after a while, without completing, if i put a big number!
notes:
If i put under 10 times, it runs always!
If i put 20 times, sometimes it runs 'till the end, some times it doesn't!
If i put over 20 times, it never ends properly!
Each time it runs, it takes between 1 to 6 minutes...
I checked the code, the logic seams ok
It runs! it does everything! just not more than 20 times... i need it to run much more than that :\
example of code:
var x = prompt("How many times should this script be runned?");
alert("It will be runned " + x + " times then!");
function doThis() {
setTimeout(function(){
...;
++n;
--x;
action();
},65000);
}
function doThat() {
setTimeout(function(){
...;
++n;
--x;
action();
},65000);
}
function action() {
if(x>0) {
if(...) {
if(n<6){
doThis();
}
} else {
if(n<6){
doThat();
}
}
} else {
alert("The Script has ended!");
}
action();

Yes, most browsers today have a time limit on how long a script can run before it returns control back to the user. This is to prevent an errant or deviant script from "hanging" that browser window.
One can typically work around it by putting a smaller timer between runs. This gives the browser a chance to service it's event loop and prevents the prompt about running too long.
I shoot for a chunk of work taking no longer than 10 seconds or so and that is way below the threshold of all browsers. Here are some previous answers about breaking your work into chunks separated by a short timer interval so things can run basically forever.
Best way to iterate over an array without blocking the UI
Avoiding "Unresponsive Script" message in a foreach loop
Best way to iterate over an array without blocking the UI