如何在javascript中的函数调用中实现去抖动答案

【问题标题】：How to implement debounce in function call in javascript如何在javascript中的函数调用中实现去抖动
【发布时间】：2020-05-04 20:32:16
【问题描述】：

我问了一个问题How to fire Ajax request after user inactivity in 1.5 seconds，关于如何在用户完成输入后更新用户数据，而不是在每个键上，我被提到了一篇他们推荐使用 javascript debounce 的帖子，我喜欢 How to implement debounce fn into jQuery keyup event? 但我可以'似乎没有找到一种方法将其实现到我的代码中，这就是我提到的解决方案所说的我应该做的事情

 $('input').keyup(debounce(function(){
 var $this=$(this);
 //alert( $this.val() );
 var n1 = $this.val();
 var n2 = $('#n2').val();
 var n3 = $('#n3').val();
 var calc = n1 * n2 * n3;
 alert(calc);
 },500));

我的功能完美运行，但我不希望它每次都运行，所以我不知道在这种情况下如何实现去抖动，这是我要添加去抖动的代码

//cart.php

<input type="text" class="count_cart content_to_cart oninput qty-remove-defaults" onkeyup="setcart(this)" onkeydown="autoSave(this)" id="updates_486" >

function autoSave(e){ //JS where I want to implement debounce    
setTimeout(function(){
var getsizes_response = $(e).attr("id");
var getsave_response_quantity = $("#"+getsizes_response).val();
$.ajax({
type: "POST",
url: "functions.php",
data: {getsizes_response: getsizes_response, getsave_response_quantity: getsave_response_quantity},
cache: false,
timeout: 5000,
success: function(r){   
$("#ajax_responses_get_positioner").show(); 
$("#ajax_responses_get_positioner").html(r);
},
error: function(){      
$("#ajax_responses_get_positioner").show(); 
$("#ajax_responses_get").html("Error saving order, please reload page and try again."); 
$("#ajax_responses_get").css({'background': 'red', 'display': 'block'});
$("#ajax_responses_get_positioner").delay(6000).fadeOut("fast");
}
}); 
}, 1500);   
}

【问题讨论】：

标签： javascript jquery debounce

【解决方案1】：

Debounce 将函数作为参数，并返回一个函数（原始函数的去抖动版本）。执行此操作的函数称为“高阶函数”。在第一个示例中，该函数没有命名，它一创建就直接传递给 debounce。在第二个示例中，您将函数命名为 autosave（这是一件很棒的事情），但这并没有让它变得更难。您所要做的就是在使用您的函数 name 之前调用 debounce。所以当你在keyup上使用它时：

$('input').keyup(debounce(autoSave, 500))

如果您想始终去抖动自动保存，您可以将去抖动函数保存到变量 autoSave，因此在此之后，它总是被去抖动。（或者您可以使用不同的名称 - 由您决定）。

autoSave = debounce(autoSave, 500)

$('input').keyup(autoSave)

把一个修饰函数重新赋值给原来的函数名叫做“decorating”，高阶函数叫做decorator。一些语言为此提供了特殊的语法，而 javascript 也是 considering adding one：

@debounce(500)
function autoSave() { … }

这将与前面的示例相同：使用 autoSave 调用 debounce，然后将其分配给 autoSave。但是，如果您今天想这样做，则需要使用 babel 或 typescript 以及正确的插件。

【讨论】：

感谢您的回答，但我似乎无法理解如何将其实现到函数中，我已经编辑了我的代码。
你不明白我的回答到底是什么？
您使用的输入来自我上一个问题的答案，我用我自己的输入类型编辑了我的问题代码，它有 keydown-autosave() 调用自动保存功能，我想用自动保存功能触发ajax，请再看我的问题，
我相信我已经回答了您的问题：“您所要做的就是在使用您的函数名称之前调用 debounce。”这没有帮助吗？为什么？
好吧，让我试试。

【解决方案2】：

在 garrett motzner 的帮助下，我想通了。

<input type="text" class="count_cart autow content_to_cart oninput qty-remove-defaults" onkeyup="setcart(this)" id="updates_486" >

$('.autow').keydown(debounce(function(){
var qthis=$(this);  
var getsizes_response = $(qthis).attr("id");
var getsave_response_quantity = $("#"+getsizes_response).val();
$.ajax({
type: "POST",
url: "functions.php",
data: {getsizes_response: getsizes_response, getsave_response_quantity: getsave_response_quantity},
cache: false,
timeout: 5000,
success: function(r){   
$("#ajax_responses_get_positioner").show(); 
$("#ajax_responses_get_positioner").html(r);
},
error: function(){      
$("#ajax_responses_get_positioner").show(); 
$("#ajax_responses_get").html("Error saving order, please reload page and try again."); 
$("#ajax_responses_get").css({'background': 'red', 'display': 'block'});
$("#ajax_responses_get_positioner").delay(6000).fadeOut("fast");
}
});
},500));

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

这允许它在用户完成输入后只调用一次。

【讨论】：