Как предотвратить слишком частое выполнение функции ajax

Question

function go_save(){
  console.log('saving...');
}

$('button').on('click', function(){
  console.log('clicked');
  //the above should be written each time the button is clicked
  //the next should be executed only if the last click happens 9 seconds in the past
  go_save();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

go_save - это функция ajax, и я хочу запретить ее выполнение, если пользователь нажимает кнопку несколько раз одновременно.

Но я не хочу ждать console.log('clicked'), только go_save()

Любая помощь?

Answer 1

Вам не следует делать это вручную, я предлагаю вам отключить кнопку после нажатия и снова включить кнопку, когда запрос ajax завершен.

Вы можете проверить разница во времени в секундах при каждом нажатии кнопки. Вы можете игнорировать проверку времени для первого клика с помощью переменной флага:

function go_save(){
  console.log('saving...');
  time = new Date();
  isFirst = false;
}
var time = new Date();
var isFirst = true;
$('button').on('click', function(){
  console.log('clicked');
  //the above should be written each time the button is clicked
  //the next should be executed only if the last click happens 9 seconds in the past
  var diff = (new Date().getTime() - time.getTime()) / 1000;
  if(isFirst || diff >= 9)
    go_save();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

Answer 2

Вы можете использовать метод setTimeout:

Редактировать согласно комментариям:

let clicker = 0;
$('button').on('click', function(){
  ++clicker;
  console.log('clicked');
  if (clicker == 1) {
    setTimeout(function() { // once button clicked, execute go_save() after 9 seconds.
      go_save();
      clicker = 0;
    }, 9000);
  }
});

Старый ответ:

$('button').on('click', function(){
console.log('clicked');
this.disabled = true; // disabled the clicked button 
setTimeout(function() { // remove it after 9 seconds
        this.disabled = false;
    }, 9000);
//the above should be written each time the button is clicked
//the next should be executed only if the last click happens 9 seconds in the past
go_save();
});

Подробнее о MDN

Answer 3

Вы можете использовать функцию debounce следующим образом:

function go_save(){
  console.log('saving...');
}

const debouncedFunction = debounce(go_save, 1000);

$('button').on('click', function() {
    console.log('clicked');
    debouncedFunction();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

Answer 4

Не нужно делать что-то очень большое. просто отключил кнопку, пока работа не была закончена. Вот код ниже

function go_save(){

  console.log('saving...');
  $('button').removeAttr('disabled');
}

const debouncedFunction = debounce(go_save, 1000);

$('button').on('click', function() {
    console.log('clicked');
    $('button').attr('disabled','disabled');
    debouncedFunction();

});

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

	};
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

Надеюсь, это поможет вам. если у вас есть какие-либо вопросы, вы можете, как и я, в любое время.

спасибо.

Сагар Кумар, разработчик программного обеспечения

Answer 5

Используйте async свойство в вашем ajax запросе. Он будет ждать завершения вашего запроса.

См. Пример -

           $.ajax({
                url: base_url+pageUrl,
                type: 'POST',
                dataType: 'json',
                data: { },  
                async: false,
                success: function(response){
                    setTimeout(function(){
                        $('#'+responseDiv).empty().html(response.template);
                    }, 500);
                },
                error: function(){
                    toastr.error("Something went wrong, but we're here to help! Reach out to <a href='mailto:helpdesk@nhpowerhour.com'>helpdesk@nhpowerhour.com</a> We're here for you!");
                }
            });