Question

This JS will be executed on pages with a lot of fields. Can you see anyway to improve the speed of this code? If so, can you explain what you found?

var _TextInputs = null;
function GetTextInputs()
{
    if (_TextInputs == null)
    {
        _TextInputs = jq('input[type=text]');
    }

    return _TextInputs;
}

var _Spans = null;
function GetSpans()
{
    if (_Spans == null)
    {
        _Spans = jq('span');
    }

    return _Spans;
}


function UpdateRate(ratefield, name)
{
    GetTextInputs().filter('[' + name + ']').each(function()
    {
        this.value = FormatCurrencyAsString(FormatCurrencyAsFloat(ratefield.value));
        CalculateCharge(name.replace('Rate', ''), jq(this).attr(name));
    });
}

function CalculateCharge(name, activity_id)
{
    var inputs = GetTextInputs();
    var bill_field = inputs.filter('[' + name + 'Bill=' + activity_id + ']');
    var rate_field = inputs.filter('[' + name + 'Rate=' + activity_id + ']');
    var charge_field = GetSpans().filter('[' + name + 'Charge=' + activity_id + ']'); 

    charge_field.text(FormatCurrencyAsString(FormatCurrencyAsFloat(bill_field.val()) * FormatCurrencyAsFloat(rate_field.val())));
}

Answer 1

You can:

• Replace each with while
• Replace val() with .value (should be fine as long as those fields are plain text ones)
• Access elements by class instead of by name/type
• Replace attr() with plain property access; e.g.: this.attr(name) –> this.name

These are all rather unobtrusive changes which should speed things up mainly due to cutting down on function calls.

Don’t query elements on every function call if those elements are static (i.e. are not modified during your app life-cycle). Instead, store them outside the loop.