时间戳

首页 > 解决方案 > 有条件地更改去抖动执行延迟

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

问题描述

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

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

我有两个不同的类分配给我的输入。第一个是submit-now，第二个是submit-later，submit-now立即submit-later触发并在 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需要一种方法来知道它是否应该继续等待用户输入或根据触发的侦听器提交我的表单，那就太好了。

标签： javascriptjquery

解决方案

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

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

function validationCheck(){
   // run validations
}

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

推荐阅读