IE8 Unresponsive script error popup on Elements reset

Question

I have a js code which resets the value of elements on jsp by type on ajax response. Code runs a for loop for all elements; gets all elements by name for nearly 800-900 elements. IE 8 gives annoying popup message for unresponsive script. I have been through lot of articles regarding it but none helped so far or I couldnt implement to fix an issue.

Below is the code which is causing pop up.

function clearField(ele,eleType)
        {
            if(eleType=="checkbox")
            {
                        ele.prop('checked', false);
            }
            else if(eleType=="text")
            {
                        ele.val("");
                        ele.removeAttr('disabled');
                        ele.removeAttr('readonly');
            }
            else if(eleType=="radio")
            {
                if(ele.is(':checked'))
                { 
                    ele.prop('checked', false);
                }
            }
            else if(eleType=="multiple")
            {
                        if(ele.data('echMultiselect')!==undefined)
                        {
                        ele.multiselect("uncheckAll");
                        ele.multiselect("refresh");
                        }
            }
            else if(eleType=="hidden")
            {
                        ele.val("");
            }
            else
            {
                        ele.val("Select");
                        ele.removeAttr('disabled');
                        ele.removeAttr('readonly');}
        }

Above function gets called in for loop iteration. ele is fetched as below and passed to a function.

          var ele = $("input[name='"+ elementName+"']"); 

Kindly suggest if any improvement can be done or any other approach can be used to implement the same.

Answer 1

The unresponsive script popup is caused by a long-running function. This blocks javascript's single threaded event loop and renders the page unresponsive until the function exits. If you run the clear asynchronously, the event loop won't get blocked. For example, you can replace clearField(ele,eleType) with setImmediate(clearField.bind(null,ele,eleType)). This is a quick hack to free up the event loop and prevent the popup from appearing, but does not address the performance issues underneath.

DOM access is an expensive operation and accessing hundreds of elements should be avoided, if possible. If your use case is to always reset all the fields to a default stage, I'd suggest having a looooong HTML string of all your elements and just calling $(parent).html(htmlString) to set the elements. This way you only need one DOM access and the effect is instantanious.

http://api.jquery.com/html/