Question

I have several <select> fields and I want their parent form to submit automatically when their values are changed but I want there to be a delay of 1.5 seconds and abort the submit if the user opens another select.

I tried this:

var tmr;
var timerOn = false;

function submitSearchOptions() {
    $('#searchoptionsform').submit();
}

$('#searchoptionsform select').change(function() {
    if (!timerOn) {
        tmr = setTimeout(submitSearchOptions,1500);
        timerOn = true;
    }
});

$('#searchoptionsform select').click(function() {
    if (timerOn) {
        clearTimeout(tmr);
        timerOn = false;
    }
});

But it doesn’t work. Selecting a value in a select also fires the click event which stops the timer.

Answer 1

You can keep track of which select started the timer and ignore the click if it’s, say, within 50ms of the timer start.

var tmr;
var timerSelect = null;
var timerStarted = null;

function submitSearchOptions() {
    $('#searchoptionsform').submit();
}

$('#searchoptionsform select').change(function() {
    if (!timerStarted) {
        tmr = setTimeout(submitSearchOptions,1500);
        timerStarted = new Date();
        timerSelect = this;
    }
});

$('#searchoptionsform select').click(function() {
    if (timerStarted) {
        if (timerSelect !== this || (new Date() - timerStarted) > 50) {
            clearTimeout(tmr);
            timerStarted = null;
            timerSelect = null;
        }
    }
});