Javascript | Loading div is displayed when the debugger is on — SS Blog
Problem:- I have added a loader div with id “spin-loader” on my web page to show processing of code. Its default style is display:none. Whenever I need to do any code processing, I start with jquery code as shown below:function someFun() {
$('#spin-loader').show();
// ajax code
// some javascript or jquery processing
$('#spin-loader').hide();
}
I was facing a weird issue in this. Normally, it works perfectly. Loading icon div is displayed as it is the first line whenever function is called and it is hidden when ajax or normal javascript code processing is completed due to the last line inside function . The div having id “spin-loader” has my own CSS properties to show some code under processing.
For a lot of pages, it worked. But for one page, it didn’t work. Loading icon div is not displayed, but ajax and javascript code worked. Without Loading , we never know code is in progress. The page should become a little faded and elements of the page should not be clickable until code is in progress. But, due to the CSS of the loader div being not changed to “display:block”, the user can click anywhere on the page.
Let’s see how I resolved the issue.
Solution
First I added a line debugger; at the start to check whether the becomes visible or not. My code becomes as follows:function someFun() {
debugger;
$('#spin-loader').show();
// ajax code
// some javascript or jquery processing
$('#spin-loader').hide();
}
While testing, the developer tool where the console tab is displayed should be open.
During testing, I observed that it processes the line$(‘#spin-loader’).show(); and loader div is displayed. But whenever I remove the line debugger; , the loading div does not become visible whenever the function is called.
Then I modify the code as follows and it worked:function someFun() {
$('#spin-loader').show();
setTimeout(function() {
// ajax code
// some javascript or jquery processing
$('#spin-loader').hide();
}, 10);
}
I put the whole code inside the setTimeout() function except the first line. Maybe the browser is busy with heavy code work and it didn’t process the first line. When I gave a few 10ms which is very very small, then the first line was also executed and the rest of the code also worked perfectly.
People having good knowledge of Financial accounting can get an Accounting Certification Exams from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.
Originally published at https://studysection.com on November 25, 2021.
