javascript - Javascript：延迟表单提交

Question

我有几个 <select> 字段，我希望它们的父表单在其值更改时自动提交，但我希望有 1.5 秒的延迟，并在用户打开另一个选择时中止提交。

我试过这个：

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;
    }
});

但它不起作用。在 select 中选择一个值也会触发 click 事件，该事件会停止计时器。

Answer 1

您可以跟踪哪个select启动了计时器并忽略click它是否在计时器启动的 50 毫秒内。

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;
        }
    }
});