Как реализовать debounce при вызове функции в javascript

Question

Я задал вопрос Как запустить Ajax запрос после бездействия пользователя в течение 1,5 секунд о том, как обновить данные пользователя после того, как пользователь закончил вводить текст при каждом нажатии клавиши, меня отправили на сообщение где они рекомендовали использовать javascript debounce, что мне нравится Как реализовать debounce fn в событии jQuery keyup? но я не могу найти способ реализовать это в моем коде, вот что в решении, о котором я упоминал, сказано, что я должен сделать

 $('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));

, моя функция работает отлично, но я не хочу, чтобы она запускалась каждый раз, поэтому я не знаю, как реализовать debounce в этом случае, это код что я хочу добавить debounce в

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

Answer 1

Debounce принимает функцию в качестве аргумента и возвращает функцию (дебаунтированную версию исходной функции). Функции, которые делают это, называются «функциями высшего порядка». В первом примере функция не имеет имени и передается непосредственно в debounce, как только она создается. Во втором примере вы назвали функцию autosave (что замечательно), но это не усложняет ее. Все, что вам нужно сделать, это вызвать debounce перед использованием вашей функции name . Поэтому, когда вы используете его на keyup:

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

Если вы хотите всегда отключать автосохранение, вы можете сохранить заблокированную функцию в переменной autoSave, чтобы после этого момента она всегда отклоняется. (Или вы можете использовать другое имя - на ваше усмотрение).

autoSave = debounce(autoSave, 500)

$('input').keyup(autoSave)

Переназначение декорированной функции исходному имени функции называется «украшением», а функция более высокого порядка называется декоратором. Некоторые языки предоставляют для этого специальный синтаксис, и javascript равно с учетом добавления еще одного :

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

Это будет делать то же самое, что и в предыдущем примере: вызовите debounce с autoSave а затем назначьте его autoSave. Однако, если вы хотите сделать это сегодня, вам нужно использовать babel или машинописный текст и нужные плагины.

Answer 2

• 1000