javascript - 有条件地更改去抖执行延迟

Question

我有一个表单，用户可以在其中输入他们的地址。用户输入完信息后，我的 JavaScript 将保存表单，无需单击提交按钮。

我遇到的问题是 debounce 函数。对于基本文本输入字段，我希望 debounce 应用其等待时间。对于我的最后一个字段，它只是一个用于将送货地址标记为与帐单相同的复选框，我希望它在选中后单击时触发表单提交。我能够完成此任务，但我的监听器彼此重叠时遇到问题，因为我的文本字段的去抖具有与我的相同的 submit-now 监听器不同的超时作为计费复选框，只需立即提交我的表格。

我为我的输入分配了两个不同的类。第一个是立即提交，第二个是稍后提交，其中立即提交并稍后提交code> 在 1700 毫秒无事件后触发。

这是我的去抖动函数:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    }
}

听众#1:

$(document).on('keyup change', '.submit-later', debounce(function(e){
    submitForm();
}, 1700));

keyup 监听器用于用户输入，change 监听器用于自动填充。

监听器#2(问题监听器):

//Notice this function does not call debounce.
//Even if it did, I would have to create a new instance of debouce with 0 ms but this would defeat the purpose since it would be using a different instance of debounce. 
$(document).on('change', '.submit-now', function(e){
    submitForm();
});

最终，如果我能让两个监听器使用同一个 debounce 实例，那就太好了，但是 debounce 需要一种方法来知道是否应该继续等待用于用户输入或根据触发的监听器提交我的表单。

Answer 1

不确定这是否是正确的方法，但您可以将所有内容包装在一个函数中。

$('input').on('keyup', function(event){   
   if(valdiationCheck()){
       $('#form').submit();
   }
});

function validationCheck(){
   // run validations
}

您正在对任何更改进行验证检查，如果一切正常，您将提交表单。