Script execution times out in Internet Explorer - php

Question

I incorporate javascript in my PHP program:
Try to check my codes.
It loops depend on the number of records in database.
for instance:
$counter = 0;
foreach($row_value as $data):
echo $this->javascript($counter, $data->exrate, $data->tab);
endforeach;
private function javascript($counter=NULL, $exrate=NULL, $tab=NULL){
$js = "
<script type='text/javascript'>
$(function () {
var textBox0 = $('input:text[id$=quantity{$counter}]').keyup(foo);
var textBox1 = $('input:text[id$=mc{$counter}]').keyup(foo);
var textBox2 = $('input:text[id$=lc{$counter}]').keyup(foo);
function foo() {
var value0 = textBox0.val();
var value1 = textBox1.val();
var value2 = textBox2.val();
var sum = add(value1, value2) * (value0 * {$exrate});
$('input:text[id$=result{$counter}]').val(parseFloat(sum).toFixed(2));
// Compute Total Quantity
var qtotal = 0;
$('.quantity{$tab}').each(function() {
qtotal += Number($(this).val());
});
$('#tquantity{$tab}').text(qtotal);
// Compute MC UNIT
var mctotal = 0;
$('.mc{$tab}').each(function() {
mctotal += Number($(this).val());
});
$('#tmc{$tab}').text(mctotal);
// Compute LC UNIT
var lctotal = 0;
$('.lc{$tab}').each(function() {
lctotal += Number($(this).val());
});
$('#tlc{$tab}').text(lctotal);
// Compute Result
var result = 0;
$('.result{$tab}').each(function() {
result += Number($(this).val());
});
$('#tresult{$tab}').text(result);
}
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
if (IsNumeric(arguments[i])) {
sum += parseFloat(arguments[i]);
}
}
return sum;
}
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
</script>
";
return $js;
}
When I running this on IE7 this message is always annoying me
Stop running this script?
A script on this page is causing your web browser to
run slowly. If it continues to run, your computer
might become unresponsive.
but in firefox it's functioning well.

Answer 1

IE displays that message when it decides that a script is taking too long (actually other browsers have a similar warning, but they don't all calculate "too long" the same way and don't all run at the same speed).
You didn't actually ask a question, but I assume you want to know how to make your script more efficient so that it will (we hope) complete before that IE message is triggered?
I like jQuery a lot, but using it does involve a lot of function calls, including nested functions with callbacks, etc., and once you start putting these functions inside loops (in your case multiple loops) it can get quite inefficient. If you're only processing a small number of items this may not be noticeable to the user, but if you're processing a lot the first thing you could change that would definitely speed up your code would be changing the .each() loops to standard for loops:
// CHANGE
var qtotal = 0;
$('.quantity{$tab}').each(function() {
qtotal += Number($(this).val());
});
// TO
var qtotal = 0,
$q = $('#tquantity{$tab}');
for (i = 0; i < $q.length; i++)
qtotal += +$q[i].value;
Note that in the for loop I've used the DOM element's value property directly rather than using jQuery to retrieve it via .val() (which even within .each() you could've done with this.value rather than $(this).val()). I've also used the unary plus operator instead of Number(). This means no function calls at all on loop iterations, whereas your way had a call to Number(), $() and .val() (not even counting the additional processing that jQuery does behind the scenes within $() and .val()).
Make a similar change for all of your .each() loops (declare i at the beginning of your function and re-use it for each loop) and you should see some improvement.