Question

I am not sure if I should be clearing everything or resetting something somewhere.

What is happening is that the browser will lock up for 10 – 30 seconds when setting a int value in the input textbox.

Here is a little snippet:

function RunIt() {
    $('#txTotW').bind('keyup', function () { 
        _totWidth = parseInt($(this).val()); 
        $('#totalWidth').text($(this).val()); 
        RunIt(); 
    });
    $('#txTotH').bind('keyup', function () { 
        _totHeight = parseInt($(this).val()); 
        RunIt(); 
    });
    $('#txBayCnt').bind('keyup', function () { 
        _bayCount = parseInt($(this).val()); 
        RunIt(); 
    });
}

If at any time one of the keyup events are fires I rebuild a table by .find('tr').remove() and this table only has three rows max at any time, but since the change of one value the entire table will be rebuilt.

This does not seem like a big enough load to make the browser lock up.

What can I do to fix this?

Answer 1

When you bind a function to an event in jQuery, it is permanently stored in a data structure as behavior that will always happen when that event is called (unless you explicitly remove the binding). So when you call RunIt() from within those callbacks/handlers, you’re adding redundant functions to that structure. The reason this slows things down is that the number of redundant callbacks increases exponentially: first 1 on each event, then 2, then 4, then 8, and so on. You don’t need to call RunIt() from within those callbacks at all: the bindings will still be there.