How do I force a label to show and hide during a long javascript function

Posted on 2015-01-09
Medium Priority
Last Modified: 2015-01-16
Hi all,
I have a jQuery web site that has a function that takes a few seconds to run.
During this time the page can become unresponsive.
I would like to indicate that it is doing something with a simple show/hide of a DIV
I have tried this:

Open in new window

But it does not get to processing the show before the page becomes unresponsive.

Any thoughts on this would be appreciated.

Best regards,

Question by:James Atkin
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 19

Expert Comment

by:Rikin Shah
ID: 40539988

You can include a timeout for some 1 or 2 seconds.. till the data is loaded.
or put the same in $(document).ready function.
LVL 44

Assisted Solution

by:Rainer Jeschor
Rainer Jeschor earned 1000 total points
ID: 40540009
question: is this run on page load? Or is it run after another event (button click ...)?
What does your DIV lookalike?
Normally your code should work.
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 1000 total points
ID: 40540046
This looks like a Knockout.js function call. If it is, surely Knockout.js has some built-in functionality for letting you know when a task is complete. Just a quick look at their documentation, I see this: this.isDone = ko.observable(data.isDone);

If I'm right, then show the "refreshing" label, call the Knockout task and wait for the "done" signal to turn off the label.
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI


Accepted Solution

James Atkin earned 0 total points
ID: 40540275
Hi all,

okay, thanks for all the input..
Tom, you are correct, this is knockout.

The overall solution I have actually come up with is to carry out the action Asynchronously:

var theFunction = [];

function PeriodicallyCalledFunction()
        theFunction.cmd = 'GetSomething';
        theFunction.data = JSON.stringify({LoginName:AppViewModel.user_session.loginName,SessionID:AppViewModel.user_session.sessionID});
        theFunction.contentType = 'application/json; charset=utf-8';
        theFunction.type = 'POST';
        theFunction.onSuccess = function(o)
            var arr1 = AppViewModel.page_model.mydata();
            var arr2 = o.ajaxdata.newdata;
            var s1 = JSON.stringify(arr1);
            var s2 = JSON.stringify(arr2);
            if (s1 != s2)
                async(doUpdate, arr2, function () {

    function async(fn, param, callback) { 
        setTimeout(function() { 
        }, 0); 

    function doUpdate(obj) { 

Open in new window

This seems to work pretty well...

Any problems with this method?
LVL 38

Expert Comment

by:Tom Beck
ID: 40540599
None that I can see.

Author Closing Comment

by:James Atkin
ID: 40553077
I have marked to solution as the answer and awarded the points between Tom & Rainer as these pointed me in the right direction. Hope this is okay.

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question