We Keep Coding

JavaScript setInterval only works once

I hope you are doing well.
I'm working on a minigame based on JS and want to prevent the user from shooting infinite bullets, so I created this condition. Which only works for the first time and then breaks for the next clicks
also to mention this whole section is inside the loop so shooting works well with or without setInterval
let shootController = true
canvas.addEventListener("click", () => {
if (shootController) {
//shooting code goes here
shootController = false;
}
});
if (shootController === false) {
setInterval(() => {
shootController = true;
}, 1000);
}
Thanks for your replies beforehand

Somehow, I defined the 'setInterval' before and outside the loop and then called that function below and outside. This one WORKS
But from curiosity, I didn't define it at the top as a function and only used it below the loop. This one didn't work.
The problem is solved, but I don't know why.

requestAnimationFrame runs twice as fast after cancelAnimtionFrame

I've been staring at my code for so long but i don't seem to understand what is happening.
Whenever the game ends, I do a cancelAnimationFrame to stop the game. Then I boot up the menu again.
Now the problem is that when I call requestAnimationFrame again, it seems like the code is calling it two times (the game runs doubly fast).
The following is my code:
This is the startup:
var areaJogo = {
beginGame: function(type) {
//...
this.myReq = requestAnimationFrame(updateArea);
//...
}
}
And this is the main function(for animation):
function updateArea(){
areaJogo.myReq=requestAnimationFrame(updateArea);
//....
if(/*conditionLoseGame*/) {
stop();
}
}
function stop() {
cancelAnimationFrame(areaJogo.myReq);
areaJogo.myReq=undefined;
}
Mind you these are the only times requestAnimationFrame and cancelAnimationFrame are used in the code. Thanks!

I have found the problem.
The reason why it was being called is because I had done a button in JavaScript to start the game.
To do this, I had to do a addeventlistener whenever I booted the menu. What I did wrong was forgetting to do cleareventlistener upon clicking the button.

stopping a nested javascript function running more than once

I'm trying to get a javascript function to run only once. I've seen this question has been asked before, e.g. Function in javascript that can be called only once, but I can't get the solutions in here to work. I'm not sure if it's because I've got nested functions, or whether there's something I'm missing. Essentially, I'm trying to run a function which, when a webpage is scrolled, it:
- runs a little animation on a canvas in the header
- reduces the size of the header
- leaves it at that
But when there is any subsequent scrolling, the animation keeps re-running. Here's a summarised version of the non-working code:
$(document).on("scroll",function(){
var arrange_title = function(){
//some code
};
if($(document).scrollTop()>0){
arrange_title();
arrange_title = function(){};
setTimeout(function(){
$("header").removeClass("large").addClass("small");
},1000);
}
});
I've also tried declaring a global variable, setting it to "false" in a "window.onload" function, then set it to true in an if function that runs the animation (the if function running only if the variable is false), but that doesn't stop it either. Thoughts?

What you're looking for is something along the lines of listenToOnce where the listener fires the one time, but never again. This could be modified to a number of calls, but the logic is like so:
Register the listener.
Then once the listener fires, remove it.
See .off
$(document).on("scroll",function(){
var arrange_title = function(){
//some code
};
if($(document).scrollTop()>0){
arrange_title();
arrange_title = function(){};
setTimeout(function(){
$("header").removeClass("large").addClass("small");
// $(document).off('scroll'); // or here
},1000);
}
$(document).off('scroll'); // remove listener, you can place this in the setTimeout if you wish to make sure that the classes are added/removed
});

Don't use a time out. That is why you are getting in trouble. Declare a variable outside of your function using var, that will make it global. Your code should be inside of a check for that variable. Before executing your code the first time but inside of the check, change that variable so that the code will never run again.

Try avoid setTimeout. Almost all animation can be watched for end.
function doHeaderAnimation() {
return $('header').animate();
}
function makeHeaderSmall() {
$("header").removeClass("large").addClass("small");
}
function handleScroll(event) {
if ($(document).scrollTop() > 0) {
doHeaderAnimation().then(makeHeaderSmall);
$(document).off("scroll", handleScroll);
}
}
$(document).on("scroll", handleScroll);

jQuery execute code each time element has class

I'm trying to execute a piece of code each time a specific element has a certain class in jQuery.
The problem I'm experiencing is that the code only executes once, then seems unactive. I'm using an if statement, but I also tried while. When I tried while the nothing really worked so that wasn't a good idea. Is there any solution? Here's the code:
if($(".slide:first").hasClass("active-slide")) {
$(".prev").hide();
$(".next").click (function () {
$(".prev").show();
});
}

JQuery queries are performed only once. You could execute it in an interval:
var checkPage = function(){
if($(".slide:first").hasClass("active-slide")) {
$(".prev").hide();
$(".next").click (function () {
$(".prev").show();
});
}
}
var intrvl = setInterval( checkPage, 300 );
This might work, but it could become really slow on big pages.
I'd rather attach the checkPage() function to the slide change event.

Wrap it in a each(), so that it executes every time slider:first occurs.
$(".slide:first-child").each(function(){
// your function goes here
});
EDIT: :first only targets the first instance of it on the page, so it will only fire one time anyway. You are probably looking for :first-child.

yet another clearInterval in javascript not working

Belive me i ve seen many solutions i still dont know why this doesnt work.
timerId = 0;
$("#dumpStartId").click(function(){
var proId = $("#curProfileId").val();
timerId = setInterval(function(){
showact();
showactdat();
},1000);
});
$("#dumpStopId").click(function(){
clearInterval(timerId);
document.getElementById('curSeqId').value = "";
if(timerId)
{
clearInterval(timerId);
}
});
dumpstartid and dumpstopid are the ids of the two buttons. Even after clicking stop the intervals are executing continuosly. Im not sure whats wrong with this code. No errors in the console too.
Update: I can observer that sometimes after insanely pressing the button for around 5 or 6 times it comes to a complete halt. Cant this thing stop instantaneously (or is too much to ask??)

setInterval iterates every "Millisecond-Value" you've given till it reaches the clearInterval. Try using onmousedown instead of onclick.

It was because the function the setInterval is calling was problematic which polls a rest service at a varied interval from the setIntervals interval causing it to conflict. I ve corrected it and that fixed it.