Hello coders/campers!
I’m in the middle of my robot-themed Tic Tac Toe project and was about to create the AI for the CPU opponents when I noticed the game would start to slow down after I replayed two player mode too many times.
Things I’ve ruled out:
Accidental double clicking/rapid clicking while JS is processing
CSS animations (lag persisted after taking off animations)
Too many uncached DOMs (I think. Most of them are assigned to variables)
Secret agents hacking my CodePen
The slow down is most noticeable when clicking “Yes” to the “Play Again” prompt after completing around 10 games.
The function I use to check win condition is kind of verbose so maybe that’s the problem? Or is the program somehow making more copies of the board/box than it needs?
Please check out my CodePen. Since the AI haven’t been made yet, choosing an opponent another than the Two Player option will not lead anywhere. The “Reset” option is disabled unless in Debug mode. Any suggestions on what could be causing the lag would be greatly appreciated. Worst comes to worst I’ll completely change the handler event for the board.
codepen.io/jx2bandito/pen/WRjORz
The page was tested on Chrome/Firefox so please also let me know if there are design problems in other browsers.
Thanks in advance!
EDIT: For anyone who has similar issues, I found this article:
http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance
Apparently .hide() and .show() are very costly functions… I’m guessing it would take care of the issue once I replace them with something faster. I’m leaving the CodePen fork up in case anyone wants to look at it and maybe learn from my mistake.
EDIT: I changed hide and show to set css display to none/default and it sped up the game but after a while the game started to slow down again. Is this just a JQuery limitation?