There is a specific set of actions that cause the website that I am building on my localhost to freeze and cause the CPU usage to jump up to 25% or so.
I am building a sort of tree structure, where the child row is loaded depending on the currently selected parent node. So, it is necessary for me to be able to save and load the objects which contain the information for all of the children, depending on the selected parent.
The issue occurs when I am trying to update the information of a previously made child row. I tell it, which will be easier to see in code, to check for any saved child row with the same parent, and, if there is a saved child row with the same parent, it stores the info of 6 textArea values for each child in the child row.
I believe that I am having this trouble because I have jquery at the top of my php file, and I have a javascript file linked at the bottom of my php file. Both of these files have eventListeners for the same button, which I believe to be causing the high CPU usage.
Is this a bad practice? Are there ways around it? Should I move all of my javascript at the bottom of my page, to the top of my page? What steps should I take to properly identify code causing high CPU usage?
Side Note: This code is as minimum and sufficient as possible. I can provide much more if necessary.
PHP:
<?php
include_once 'header.php';
?>
<link rel="stylesheet" type="text/css" href="essayTree.css">
<section class="account-main-container">
<div class="account-main-wrapper">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EssayTree</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script>
var childObjects = [];
var mostRecentParentClicked = "";
var newItem;
var childTextObject = function(parent, texts){
this.parent = parent;
this.texts = texts;
};
var isNewChildRow = function(parent){
for(i=0;i<childObjects.length;i++){
if(childObjects[i].parent === parent){
return false;
} else {
return true;
}
}
if(childObjects.length === 0){
return true;
}
};
var indexOfChildRow = function(parent){
for(i=0;i<childObjects.length; i++){
if(childObjects[i].parent === parent){
return i;
} else {
return -1;
}
}
};
//Listener for the most recent parentText clicked
$(document).ready(function(){
$('.parentText').click(function(){
mostRecentParentClicked = $(document.activeElement).attr('id');
});
});
//THIS PART RIGHT HERE STARTED CAUSING THE HIGH CPU USAGE
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$(document).ready(function(){
$('button#saveInfo').click(function(){
if(isNewChildRow(mostRecentParentClicked)){
newItem = new evidenceTextObject(mostRecentParentClicked, ["", "", "", "", "", ""]);
for(i=0;i<6;i++){
newItem.texts[i] = $('#childText' + (i+1)).val();
}
} else {
for(i=0;i<6;i++){
childObjects[indexOfChildRow(mostRecentParentClicked)].texts[i] =
$('#childText' + (i+1)).val();
}
}
childObjects.push(newItem);
});
});
</script>
</head>
<body>
<div id="top">
<div id="parentParagraphs">
<div id="firstParentRow" class="w3-row">
<div id="parent1" class="w3-col s4">
<h2>parent #1</h2>
<textArea id="parentText1" class="parentText"></textArea>
</div>
<div id="parent2" class="w3-col s4">
<h2>Body #2</h2>
<textArea id="parentText2" class="parentText"></textArea>
</div>
<div id="parent3" class="w3-col s4">
<h2>parent #3</h2>
<textArea id="parentText3" class="parentText"></textArea>
</div>
</div>
<div id="secondParentRow" class="w3-row">
<div id="parent4" class="w3-col s4">
<h2>parent #4</h2>
<textArea id="parentText4" class="parentText"></textArea>
</div>
<div id="parent5" class="w3-col s4">
<h2>Body #5</h2>
<textArea id="parentText5" class="parentText"></textArea>
</div>
<div id="parent6" class="w3-col s4">
<h2>Body #6</h2>
<textArea id="parentText6" class="parentText"></textArea>
</div>
</div>
<button id="selectParent" type="button">Select</button>
<div id="middle">
<div id="children">
<div id="firstChildRow" class="w3-row">
<div id="child1" class="w3-col s4">
<h2>child #1</h2>
<textArea id="childText1" class="childText"></textArea>
</div>
<div id="child2" class="w3-col s4">
<h2>child #2</h2>
<textArea id="childText2" class="childText"></textArea>
</div>
<div id="child3" class="w3-col s4">
<h2>child #3</h2>
<textArea id="childText3" class="childText"></textArea>
</div>
</div>
<div id="secondChildRow" class="w3-row">
<div id="child4" class="w3-col s4">
<h2>child #4</h2>
<textArea id="childText4" class="childText"></textArea>
</div>
<div id="child5" class="w3-col s4">
<h2>child #5</h2>
<textArea id="childText5" class="childText"></textArea>
</div>
<div id="child6" class="w3-col s4">
<h2>child #6</h2>
<textArea id="childText6" class="childText"></textArea>
</div>
</div>
//THIS IS THE BUTTON THAT IS CAUSING THE ISSUE
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<button id="saveInfo" type="button">Save All Children</button>
</div>
</div>
</div>
</div>
</div>
//THIS PART RIGHT HERE HAS AN EVENT LISTENER FOR THE SAME BUTTON
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<script type="text/javascript" src="essayTree.js"></script>
</body>
</html>
</div>
</section>
<?php
include_once 'footer.php';
?>
So as you can see I have marked the jquery code that was causing issues at the top of this code, and I have also marked the javascript file that I believe to be interfering with it.
I will now put the javascript code for the event listener that is for the same button.
Javascript:
var childController = (function(){
var childObjects = [];
var childObject = function(name, parent, info){
this.name = name;
this.parent = parent;
this.info = info;
};
var indexOfChildObject = function(name, parent){
var location = -1;
for(i=0;i<childObjects.length;i++){
if(childObjects[i].name === name && childObjects[i].parent === parent){
location = i;
}
}
return{
index: location
}
};
var storeChildren = function(index){
for(i=0;i<6;i++){
parentObjects[index].children[i] = document.getElementById("childText" + (i+1)).value;
}
};
//THIS IS THE FUNCTION THAT HAS AN EVENT LISTENER FOR THE SAME BUTTON
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var saveButton = function(){
document.addEventListener("click", function(){
if(document.activeElement.id === "saveInfo" && doms.saveInfo.innerHTML === "Save All Children){
storeChildren(indexOfParentObject(selectedParent).index);
}
});
};
return{
init: function(){
saveButton();
}
}
})();
childController.init();
