Javascript Memory Leaks - setTimer() & setInterval()

[itsmichaelhagen]

Body

I'm fairly new to Javascript and have just stumbled across the issue of memory leaks. As I've researched why my webpage may have crashed I discovered the memory leak is likely from the various setTimeout() functions and setInterval() functions that I have in my code. However, I am having a whole lot of trouble pinpointing this issue. I think the culprit is probably somewhere in the source code I've put below. There may be a few other spots where a setTimeout() or setInterval() function lives, but I think it is somewhere below.

Can someone breakdown how I might be able to go about finding this memory leak? If you see something in my code (yes, it's probably pretty messy), please let me know. I'm going in circles at this point when it comes to identifying this memory leak. It seems to happen at a random time.

P.S. - for context on what I am working on, this is a baseball game simulator. It is supposed to simulate a baseball game from start to finish. It has a pitch clock and is very dependent on the setIntervals and setTimers to keep the game flowing in a realistic manner.

let intervalId;
let simInterval;
let throwpitchInterval;
var pitchInterval;
var pitchclockInterval;
var nextInterval;

function throwPitch() {
	p = 1;
	timeLeft = 1;


	document.getElementById("pbp-text").innerHTML = "<b>The pitcher gets set...</b>";

	pitchclock();
	pitchTime();

	throwpitchInterval = setTimeout(() => {
		pitch();
		atbatPitches++;
		pitches++;
		atbatRecord();
	}, p);

	throwpitchInterval = null;

	if (batOver > 1000) {
		document.getElementById("pbp-text").innerHTML = "<b>AT BAT OVER</b>";
		resetCount();
		clearInterval(pitchInterval);
	};

}

function atbat() {
	batOver = 0;
	p = 1;
	pitchclock();
	pitchTime();
	document.getElementById("pbp-text").innerHTML = `<b>Next up to bat: ${currentbatter.name}</b>`;
	document.getElementById("lastpitch").innerHTML = "";
	document.getElementById("velocity").innerHTML = "";
	throwpitchInterval = setTimeout(() => {
		pitch();	
		atbatPitches++;
		pitches++;
		atbatRecord();
	}, p);

	throwpitchInterval = null;

	pitchInterval = setInterval(throwPitch, 15000);

}

function nextAtBat() {
	showRunners();
	setTimeout(() => {
		resetCount();
		atbat();
	}, 10000);

}

function playball() {
	document.getElementById("playball").style.display = "None";
	document.getElementById("pbp-text").innerHTML = `<b>PLAY BALL!</b>`;
	inning = 1;
	switchSides();
		

	setTimeout(() => {
		atbat();
	}, 6000);

}

function changeInning() {
	if (inning == 1) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();

		inningRuns = 0;
		inningclock();
		/* document.querySelectorAll(".defense").style.backgroundColor="#BD3039";
		document.querySelectorAll(".offense").style.backgroundColor="#ffffff";
		document.querySelectorAll(".defense").style.border="2px solid #0D2B56";
		document.querySelectorAll(".offense").style.border="2px solid #0C2340";
		document.querySelectorAll(".defense").style.color="#ffffff";
		document.querySelectorAll(".offense").style.color="#0C2340";*/	
		document.getElementById("box-T1").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B1").style.backgroundColor="#000000";
		document.getElementById("bottom-1").innerHTML = inningRuns;		
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 1.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();

		inningRuns = 0;
		inningclock();
		document.getElementById("box-B1").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T2").style.backgroundColor="#000000";
		document.getElementById("top-2").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 2) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-T2").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B2").style.backgroundColor="#000000";
		document.getElementById("bottom-2").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 2.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B2").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T3").style.backgroundColor="#000000";
		document.getElementById("top-3").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 3) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-T3").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B3").style.backgroundColor="#000000";
		document.getElementById("bottom-3").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 3.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B3").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T4").style.backgroundColor="#000000";
		document.getElementById("top-4").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 4) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-T4").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B4").style.backgroundColor="#000000";
		document.getElementById("bottom-4").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 4.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B4").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T5").style.backgroundColor="#000000";
		document.getElementById("top-5").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-T5").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B5").style.backgroundColor="#000000";
		document.getElementById("bottom-5").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 5.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B5").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T6").style.backgroundColor="#000000";
		document.getElementById("top-6").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 6) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		document.getElementById("box-T6").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B6").style.backgroundColor="#000000";
		document.getElementById("bottom-6").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 6.5) {
		inning = inning+0.5;
		resetRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B6").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T7").style.backgroundColor="#000000";
		document.getElementById("top-7").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 7) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		seventhinningstretch();
		document.getElementById("box-T7").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B7").style.backgroundColor="#000000";
		document.getElementById("bottom-7").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 7.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B7").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T8").style.backgroundColor="#000000";
		document.getElementById("top-8").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 8) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-T8").style.backgroundColor="#4f7e6f";
		document.getElementById("box-B8").style.backgroundColor="#000000";
		document.getElementById("bottom-8").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning == 8.5) {
		inning = inning+0.5;
		resetRunners();
		showRunners();
		switchSides();
		
		inningRuns = 0;
		inningclock();
		document.getElementById("box-B8").style.backgroundColor="#4f7e6f";
		document.getElementById("box-T9").style.backgroundColor="#000000";
		document.getElementById("top-9").innerHTML = inningRuns;	
		setTimeout(() => {
			nextAtBat();
		}, 15000);
	} else if (inning >= 9) {
		if (homeScore>awayScore) {
			document.getElementById("pbp-text").innerHTML = "<b>GAME OVER</b>";
			document.getElementById("bottom-9").innerHTML = 'X';
			document.getElementById("box-T9").style.backgroundColor="#4f7e6f";
			document.getElementById("box-B9").style.backgroundColor="#4f7e6f";
			document.getElementById("away-runs").style.backgroundColor="#000000";
			document.getElementById("away-hits").style.backgroundColor="#000000";
			document.getElementById("away-errors").style.backgroundColor="#000000";
			document.getElementById("home-runs").style.backgroundColor="#000000";
			document.getElementById("home-hits").style.backgroundColor="#000000";
			document.getElementById("home-errors").style.backgroundColor="#000000";
		} else if (homeScore<awayScore) {
			document.getElementById("pbp-text").innerHTML = "<b>GAME OVER</b>";
			document.getElementById("box-T9").style.backgroundColor="#4f7e6f";
			document.getElementById("box-B9").style.backgroundColor="#4f7e6f";
			document.getElementById("away-runs").style.backgroundColor="#000000";
			document.getElementById("away-hits").style.backgroundColor="#000000";
			document.getElementById("away-errors").style.backgroundColor="#000000";
			document.getElementById("home-runs").style.backgroundColor="#000000";
			document.getElementById("home-hits").style.backgroundColor="#000000";
			document.getElementById("home-errors").style.backgroundColor="#000000";		
		} else if (homeScore==awayScore) {
			inning = inning+0.5;
			resetRunners();
			showRunners();
			switchSides();
			inningRuns = 0;

			if (inning % 1 == 0) {
				document.getElementById("last-inning").innerHTML = inning;	
				document.getElementById("box-T9").style.backgroundColor="#000000";
				document.getElementById("box-B9").style.backgroundColor="#4f7e6f";
				document.getElementById("top-9").innerHTML = inningRuns;		
			} else if (inning % 1 !== 0) {
				document.getElementById("last-inning").innerHTML = (inning-0.5);	
				document.getElementById("box-T9").style.backgroundColor="#4f7e6f";
				document.getElementById("box-B9").style.backgroundColor="#000000";
				document.getElementById("bottom-9").innerHTML = inningRuns;				
			} else {
				document.getElementById("last-inning").innerHTML = inning;				
				console.log('Error calculating extra inning.');	
			}


			inningclock();
			setTimeout(() => {
				nextAtBat();
			}, 15000);				
		};
	} else {
		document.getElementById("pbp-text").innerHTML = "<b>GAME OVER</b>";	
		document.getElementById("away-runs").style.backgroundColor="#000000";
		document.getElementById("away-hits").style.backgroundColor="#000000";
		document.getElementById("away-errors").style.backgroundColor="#000000";
		document.getElementById("home-runs").style.backgroundColor="#000000";
		document.getElementById("home-hits").style.backgroundColor="#000000";
		document.getElementById("home-errors").style.backgroundColor="#000000";
	};
}```

### Guidelines

- [X] I have read and understood this category's [guidelines](https://github.com/orgs/community/discussions/51384) before making this post.

[davevad93]

Hi @itsmichaelhagen ,

I think the memory leaks are caused by multiple intervals and timeouts instances running simultaneously, you need to clear them properly before setting new ones, try the following and check if it fixes it:

First add this function to handle the clearing of timeouts and intervals at the top of your code, right after the variables.

function clearInstances() {
    if (throwpitchInterval) {
        clearTimeout(throwpitchInterval);
        throwpitchInterval = null;
    }
    if (pitchInterval) {
        clearInterval(pitchInterval);
        pitchInterval = null;
    }
    if (nextInterval) {
        clearTimeout(nextInterval);
        nextInterval = null;
    }
}

Then call the above function at the top inside throwPitch(), atbat(), nextAtBat(), playball() and ChangeInning() functions.

clearInstances();

[itsmichaelhagen]

Thank you for your reply @davevad93. I tried this and it did clear timeouts and intervals but it isn't keeping the flow of the game going. It stops after 1 pitch. I started moving the clearInstances() call to different parts to see how it'd work, but moving it didn't help with the memory leak.

[davevad93]

Hi @itsmichaelhagen ,

That could be due to the clearInstances() function that clears all the instances still needed to keep the flow of the game, that's why it stops after 1 pitch, sorry I hadn't thought about that. So let's try with a different approach by adding different specific functions to clear each interval and timeout instead of using just one, for example something like this:

function clearThrowPitchInterval() {
    if (throwpitchInterval) {
        clearTimeout(throwpitchInterval);
        throwpitchInterval = null;
    }
}

function clearPitchInterval() {
    if (pitchInterval) {
        clearInterval(pitchInterval);
        pitchInterval = null;
    }
}

function clearNextInterval() {
    if (nextInterval) {
        clearTimeout(nextInterval);
        nextInterval = null;
    }
}

Then call the specific clearing function before setting a new interval or timeout:

function throwPitch() {
    clearThrowPitchInterval();
    // rest of your code
}

function atbat() {
    clearPitchInterval();
    // rest of your code
}

function nextAtBat() {
    clearNextInterval();
    // rest of your code
}

function playball() {
    clearThrowPitchInterval(); 
    clearPitchInterval(); 
    clearNextInterval(); 
    // rest of your code
}

function changeInning() {
    clearNextInterval();
    // rest of your code
    if (inning == 1) {
        nextInterval = setTimeout(() => {
            nextAtBat();
        }, 15000);
   // add "nextInterval = setTimeout(()" inside all the conditions "if (inning == x)"

Let me know how it goes.

[itsmichaelhagen]

@davevad93 No luck. I have put a clearInterval() type of function for each timeout or interval that I have, placing them in the main functions as you have shown above. It has made me think that there may be a separate issue. Could it be that I have too many variables in the global scope?

I think all of this below would capture all the variables I have in the global scope. Should I find a way to consolidate and minimize this number? It includes statistical modifiers, team/player information, as well as information for the game such as runs scored, hits, inning, timer, etc.

let timeLeft = 15000;
let timeX = 0;
var throwpitchInterval;
let atbatPitches = 0;
let p = 1;
let batOver = 0;
var pitchInterval;
var pitchclockInterval;
var nextABTimeout;
var changeInningTimeout;
var playballTimeout;
let inningRuns = 0;
let justscored = 0;
let numberofRunners = 0;
let homePrimary = '#ffffff';
let homeSecondary = '#0C2340';
let homeNumbers = '#0C2340'
let awayPrimary = '#BD3039';
let awaySecondary = '#0C2340';
let awayNumbers = '#0C2340';
let homeP = 45;
let homeC = 28;
let homeFirst = 48;
let homeSecond = 25;
let homeThird = 95;
let homeSS = 11;
let homeLF = 24;
let homeCF = 99;
let homeRF = 22;
let awayP = 50;
let awayC = 12;
let awayFirst = 2;
let awaySecond = 23;
let awayThird = 11;
let awaySS = 70;
let awayLF = 16;
let awayCF = 43;
let awayRF = 52;
let gameID = 1;
let data = `Game Log for gameid: ${gameID}`;

// Stats Variables
	let pa = 0;
	let ab = 0;
	let bb = 0;
	let hit = 0;
	let singleStat = 0;
	let doubleStat = 0;
	let tripleStat = 0;
	let homerunStat = 0;
	let so = 0;
	let ba = 0;
	let sopct = 0;
	let putout = 0;
	let pitches = 0;
	strikes = 0;
	balls = 0;
	let contact;

let currentpitcher = new Pitcher('Default Pitcher', 'Right','Fastball', 150, 150, 150, 92, 200);
let currentbatter = new Batter('Default Batter', 'Right', 'Pull', 'Contact',150, 150, 125, 125);


let lastpitch = "None";
let lastpitchType = "None";

//Strike/Ball Bubble Variables
	s1 = document.getElementById("strike-1");
	s2 = document.getElementById("strike-2");
	b1 = document.getElementById("ball-1");
	b2 = document.getElementById("ball-2");
	b3 = document.getElementById("ball-3");
	o1 = document.getElementById("out-1");
	o2 = document.getElementById("out-2");
	let strikes = 0;
	let balls = 0;
	let outs = 0;


// Game Modifiers
	strikeMod = 0.5201;
	strikeoutMod = 0.1701;
	gbPct = 0.4270;
	fbPct = 0.3570;
	ldPct = 0.2160;

	baMod = 0.2899;
	singlesMod = 0.6828;
	doublesMod = 0.1762;
	triplesMod = 0.0153;
	homerunMod = 0.1256;
	ldHit = .6675;
	gbHit = .2525;
	fbHit = .0800; 

	leftHZ = 0.1434;
	leftcenterHZ = 0.2849;
	centerHZ = 0.1434;
	rightcenterHZ = 0.2849;
	rightHZ = 0.1434;

	leftOZ = 0.2461;
	leftcenterOZ = 0.1300;
	centerOZ = 0.2460;
	rightcenterOZ = 0.1300;
	rightOZ = 0.2461;

	leftfoulZone = .3333;
	behindfoulZone = .3334;
	rightfoulZone = .3333;

	single = singlesMod;
	double = singlesMod+doublesMod;
	homerun = singlesMod+doublesMod+homerunMod;
	triple = 1-triplesMod;

	//Count Swing Modifiers
	firstpitchSwing = 0.2664;
	ohoneSwing = 0.4662;
	ohtwoSwing = 0.4991;
	oneohSwing = 0.4054;
	oneoneSwing = 0.5327;
	onetwoSwing = 0.5788;
	twoohSwing = 0.3909;
	twooneSwing = 0.5910;
	twotwoSwing = 0.6568;
	threeohSwing = 0.0642;
	threeoneSwing = 0.5472;
	fullCountSwing = 0.7384;

	//Count Foul% Modifiers
	firstpitchFoul = 0.3699;
	ohoneFoul = 0.3825;
	ohtwoFoul = 0.3865;
	oneohFoul = 0.3853;
	oneoneFoul = 0.3866;
	onetwoFoul = 0.3882;
	twoohFoul = 0.3953;
	twooneFoul = 0.3954;
	twotwoFoul = 0.3996;
	threeohFoul = 0.4095;
	threeoneFoul = 0.3968;
	fullCountFoul = 0.4058;

	//Count Ball in Play Modifiers
	firstpitchBIP = 0.3926;
	ohoneBIP = 0.4010;
	ohtwoBIP = 0.3675;
	oneohBIP = 0.4282;
	oneoneBIP = 0.4155;
	onetwoBIP = 0.3889;
	twoohBIP = 0.4504;
	twooneBIP = 0.4355;
	twotwoBIP = 0.4096;
	threeohBIP = 0.4669;
	threeoneBIP = 0.4699;
	fullCountBIP = 0.4461;

	//Count Whiff Modifiers
	firstpitchWhiff = 0.0521; // .9479
	ohoneWhiff = 0.1009; //
	ohtwoWhiff = 0.1228; //
	oneohWhiff = 0.0756; //
	oneoneWhiff = 0.1054; //
	onetwoWhiff = 0.1290; //
	twoohWhiff = 0.0603; //
	twooneWhiff = 0.0999; //
	twotwoWhiff = 0.1253; //
	threeohWhiff = 0.0079; //
	threeoneWhiff = 0.0729; //
	fullCountWhiff = 0.1093; //

	let currentSwing;
	let currentFoul;
	let currentBIP;
	let	currentWhiff;
	let currentContact;
	let pitchtype;
	let pull;
	let spraytype;
	let hittertype;
	let currentFrame;
	let inning;
	let currentinningRuns = 0;
	let awayScore = 0;
	let homeScore = 0;
	let awayHits = 0;
	let homeHits = 0;
	let awayErrors = 0;
	let homeErrors = 0;
	let onFirst = false;
	let onSecond = false;
	let onThird = false;
	let scoreHome = false;

[davevad93]

Hi @itsmichaelhagen , wow that's a lot of global variables, I'm beginning to suspect that the problem you have isn't due to a memory leak but rather a general performance problem, while variables don't inherently cause a memory leak, having a lot of global variables can affect performance. You should limit their usage as much as possible and instead use local variables inside functions or blocks. Encapsulation comes in handy in such cases, encapsulating variables and related functions inside objects or modules to limit their scope and improve maintainability. Another thing that can help improve performance is to regularly clear or reset variables that contain lots of data which is the approach we have used in the previous answers. I'm not an expert in game development with JavaScript as I use it mainly for web development only, so based on that, I wouldn't know how to give you further advices, that's why I'm going to leave you a few resources on game development with JavaScript that you might find useful:

1. Performance tips for JavaScript Game Developers
2. Performance tips for JavaScript Game Developers 2: Game Loops and Dropped Frames
3. What are the best ways to optimize JavaScript performance for web games?

[itsmichaelhagen]

Thanks for your replies man, I really appreciate it. I'll probably move forward trying to clean up those variables!

[davevad93]

You're welcome, have a nice day @itsmichaelhagen !