I need to run a super long JavaScript on my page. The client is complaining that IE shows a warning dialog for the script being too long. Unfortunately, there is no way we can reduce the length of the script, so I am trying to find a bypass for the problem.
According to Microsoft support website:
IE tracks the total number of executed
script statements and resets the value each time that a new script execution is started, such as from a timeout or from an event handler. It displays a
"long-running script" dialog box when
that value is over a threshold amount.
However I have tried to use both setInterval() and setTimeout() to break my script into pieces, but none is working. The browser I am using is IE8. My code is as following:
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
</head>
<body>
<div id ="test"></div>
<div id ="log"></div>
</body>
<script>
var repeat =0;
function heavyTask(){
if (repeat<50){
y = longRun();
setTimeout("heavyTask()",100);
}else{
$('#test').html("done!");
}
}
function longRun(){
for(var i =0; i<20000;i++){ }
repeat++;
$('#log').append('<div>repeat: '+ repeat +'</div>');
};
$(document).ready(function () {
setTimeout("heavyTask()",100);
});
</script></html>
In order to make the code work, you have to edit Registry, go to
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles, and set the DWORD value called "MaxScriptStatements" to 100,000. If the Styles key is not present, create a new key that is called Styles.
Thanks,
This processing limit is set by the browser, not JavaScript.
You can break your process down into smaller steps.
See this question: How can I give control back (briefly) to the browser during intensive JavaScript processing?
just some syntax errors... http://jsfiddle.net/Detect/HnpCr/3/
Related
when I click the button it will not run
Add a button with id btnPrint and value “Print” and an event handler called printString()
add a which will be used to receive (and display) the characters in the string incrementally. This would look something like:
document.getElementById("outDiv").innerHTML += myNextChar;
Display 100 characters on a line and then start a new line, continuing until all the characters have been displayed.
<html>
<head>
<title>Exercise</title>
<script language="JavaScript" type="text/JavaScript">
function printString(){
str="The nefarious thing about performance bugs is that the user may never know they are there - the program appears to work correctly, carrying out the correct operations, showing the right thing on the screen or printing the right text. It just does it a bit more slowly than it should have. It takes an experienced programmer, with a reasonably accurate mental model of the problem and the correct solution, to know how fast the operation should have been performed, and hence if the program is running slower than it should be";
var myNextChar="";
var char=0;
function innerLoop(){
myNextChar=str.slice(char,char+1);
if((char+1)%100===0){
myNextChar+="<br />"
}
char++;
document.getElementById("str").innerHTML += myNextChar;
setTimeout(innerLoop,10);
}
innerLoop();
}
//window.onload = printString;
</script>
</head>
<body>
<button onclick="printString()">Print</button>
</body>
Uncaught TypeError: Cannot read property 'innerHTML' of null
at innerLoop (Exercise4.html:16)
at printString (Exercise4.html:20)
at HTMLButtonElement.onclick (Exercise4.html:28)
You need move your script to before close </body> tag and add a div with id str
<div id='str'></div>
function printString(){
str="The nefarious thing about performance bugs is that the user may never know they are there - the program appears to work correctly, carrying out the correct operations, showing the right thing on the screen or printing the right text. It just does it a bit more slowly than it should have. It takes an experienced programmer, with a reasonably accurate mental model of the problem and the correct solution, to know how fast the operation should have been performed, and hence if the program is running slower than it should be";
var myNextChar="";
var char=0;
function innerLoop(){
myNextChar=str.slice(char,char+1);
if((char+1)%100===0){
myNextChar+="<br />"
}
char++;
document.getElementById("str").innerHTML += myNextChar;
var id = setTimeout(innerLoop,10);
if(char > str.length) clearTimeout(id);
}
innerLoop();
}
//window.onload = printString;
<html>
<head>
<title>Exercise</title>
</head>
<body>
<button onclick="printString()">Print</button>
<div id='str'></div>
</body>
In javascript, if you have an infinite loop using console.log, it will write everything to the console until it overflows. However, if you do this with document.write, in an infinite loop, it will freeze the page and nothing will load. Does anyone know the reason for this?
example is here
<html>
<head>
<script type='text/javascript'>
var x = 0;
function conslog() {
var x = 0;
while (1) {
console.log(x);
x++;
}
}
function dowrite() {
var x = 0;
while (1) {
document.write(x);
x++;
}
}
</script>
</head>
<body>
<button type='button' onClick='conslog()'>console</button>
<button type='button' onClick='dowrite()'>write</button>
</body>
</html>
http://shodor.org/~amalani/infinite.html
The view process for logged messages is independent of the script. While the script runs in an infinite loop, at some times the renderer will intercept it and show the queued messages.
In contrast, document.write does write to a buffer that is going to be parsed when the pending parsing-blocking script finished running. Only it doesn't finish…
If you'd use the DOM to append new elements, they would probably output.
The page will repaint when Javascript is not executing, if it's running a loop the page won't repaint because Javascript is still executing. The console may repaint while Javascript is running on the page.
Mostly likely because there are no finite limits on the size of the HTML page, but the console debug log will? I'm guessing your CPU load went up as well whilst the browser effectively did nothing more than process a loop. I'm guessing this is with code that's something of the form while (1) { console.log ("something") }; ?
You've not stated what browser this is with, so you'll probably find different browsers have different behaviours of the console log. Those that implement it as a growing list or ring buffer may also suffer the browser hanging as well.
<textarea name="widget-generalcode" cols="50" rows="13" id="widget-generalcode"></textarea>
and javascript
<script>
document.getElementById('widget-generalcode').innnerHTML = 'test';
</script>
When I run code, error TypeError: document.getElementById(...) is null, how to fix it ?
May be you should put it on pageload:
<script type="text/javascript">
window.onload = function(){
document.getElementById('widget-generalcode').innerHTML = 'test';
};
</script>
You should consider where you place javascript statements.
It will effect to the desired result.
I recommended that you should use web development tool such as Firebug in Firefox (press F12)
It will help you to debug javascript code and you can use Timeline feature to detect which parts of your Html/javascript "spent" a lot of resources.
Hope this information is useful.
First of all, check that your JavaScript is executed when DOM is loaded. One option is to put your <script> tag just before </body>.
Then, you should use value property for form fields:
document.getElementById("widget-generalcode").value = "test";
you are trying to access the element before it is rendered on your page so you will never get that element so write your code in function as below
<script>
function call()
{
document.getElementById('widget-generalcode').value = 'test';
}
</script>
and now in body tag palce onload ="call()" as given below it will work
<body onload ="call()" >
</body>
Sorry I'm new 2 Stackoverflow
In asp.net Actualy Startup is my id but on clientside it will be displayed as ctl00_dmrcontent_Startup
so in ur script change id form widget-generalcode to what display in clientside
<div id="Startup" runat="server">
This caused me much grief. It's a matter of understanding the sequence of execution of the "onLoad" (which occurs after all the PHP has been executed and turned into HTML), and the running of a js command after say parsing the url parameters (which occurs before onLoad).
The javascript function ran before the html page with rendered by the browser. So the element with the id="widget-generalcode" did not exist when the code ran.
Use window.unload= functionName at the top of your javscript file, without parentheses (). This tells the browser to run the function after the html page loads. This way the html element will exist when the function runs and the javascript can act on it.
I am new to the web development. I have a code that's supposed to change images when clicked on the image, and change the image back when released. And also it counts how many times it is clicked. I was building and testing this code on Safari and I didn't had any problems. It works just as expected on Safari. However it does not work on Chrome and IE (I haven't tested any other browsers).
I was normally working with HTML5 Boilerplate however I reduced the code so that I can show here (This version doesn't work too).
I have given the code of the page below. What should I do to make it work on every browser. What is the reason that it acts differently on browsers?
Thanks in advance
<!html>
<html>
<head>
<title></title>
<script type="text/javascript">
var count = 0;
function incrementCount()
{
count++;
document.getElementById( "count").innerHTML = count;
}
function pushTheButton()
{
document.images("bigRedButton").src = "img/pressed.gif";
return true;
}
function releaseTheButton()
{
document.images("bigRedButton").src = "img/unpressed.gif";
return true;
}
</script>
</head>
<body>
<div role="main">
<p>
<img src = "img/unpressed.gif" name="bigRedButton" onmousedown="pushTheButton()" onmouseup="releaseTheButton()" onclick="incrementCount()"/>
</br>
Click Count:<p id="count">0</p>
</p>
</div>
</body>
</html>
When testing in Chrome, remember to use its JavaScript console to watch for errors. In this case, it returns the following:
Uncaught TypeError: Property 'images' of object # is not a function
Your problem is on lines 18 and 24, when you attempt to access document.images("bigRedButton") -- document.images is an array (or possibly an object), not a function. It should be:
document.images["bigRedButton"].src
I don't know why it worked on Safari.
http://www.w3schools.com/jsref/coll_doc_images.asp
document.images is documented a integer-indexed array of images.
To be really sure, you should use:
document.images[0].src = ...
Although accessing the image by using the name works in many cases as well.
I'm having problems with debugging DOM changes introduced by some JavaScript code I'm running. Somewhere in the code an element's class is changed, and I'm trying to pinpoint where exactly. Unfortunately, the new class name is so generic that searching through all the JS code gives too many results to be a viable option.
I've tried debugging a bit with Firebug, but despite the nice "Break on Attribute Change" feature, I can't get it to work in a way I would want. The Firebug demo works correctly, but it's a post load situation.
The problem seems to be that I want to watch for mutations before the page is fully loaded. I assume that the changes occur somewhere in $(document).ready(), so it's in the DOM, but I can't select elements for UI breakpoints as would be the case with the demo (after page load).
Is there some way to debug this kind of situation other than grepping/going through the code by hand?
I propose that you remove the target element where its classname is changed. With some luck, you may be able to generate an error in the JavaScript code, so you will find where is your problem.
Otherwise, if it's done by JQuery (addClass), you may want to modify the JQuery code itself just to figure out the callstack.
The code would look like this (make sure this code is the first code called after JQuery inclusion):
(function () {
var addClass = jQuery.fn.addClass;
jQuery.fn.addClass = function (value) {
for (var i = 0, l = this.length; i < l; i++) {
// Here you put your method to start the debugger if you get your right element
if (this[i].id === "abc") {
debugger;
}
}
addClass(value);
}
})();
Hope that helps.
This answer may sound pretty lame, but I honestly think the best solution for bugs like this is "deconstructing" your program. Just make a copy of the entire project, then rip it apart. Take out chunks of code one by one. Turn function calls into stub functions or whatever to keep things running. Find the minimal amount of code that triggers the bug. Then the solution should be obvious.
Have you considered adding a mutation event? The event I think you want, DOMAttrModified, is not supported in webkit, so you might have to test with Firefox or Opera. In fact it is deprecated in DOM level 3.
There are two jQuery plugins for mutation events here (documentation) and here but since you want to do this before page load they might not be the answer.
You are probably best writing your own JavaScript bind for this event - there is an example in the answer to is there an alternative to DOMAttrModified that will work in webkit
I hope this helps.
If you want to use the "Break on Attribute Change" feature to debug, you can do the following:
Comment out all JS in the page (which is hopefully all in the head) except for the base jQuery load.
Load the page and set your watch points.
Add a button, which fires the JS, to the HTML. Or, optionally fire it from the console.
Trigger the JS load/fire. Hopefully your watch and break points will fire as desired.
For example, suppose your page loads/has:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="/Library_X.js" type="text/javascript"></script>
<script src="/MyJS.js" type="text/javascript"></script>
Then you could run this code in the console after setting the watch points:
function addJS_Node (text, s_URL)
{
var scriptNode = document.createElement ('script');
scriptNode.type = "text/javascript";
if (text) scriptNode.textContent = text;
if (s_URL) scriptNode.src = s_URL;
document.head.appendChild (scriptNode);
}
addJS_Node (null, '/Library_X.js');
//-- Possible pause here.
addJS_Node (null, '/MyJS.js');
// etc.
Or temporarily code a button that fires the same JS, into the page's HTML.