Функция отказов в Jquery?

Question

Я искал функцию отказов или способ отказов в Jquery. Создание анимации может стать очень раздражающим. Вот код:

function fade() {
    $('.media').hide();
    $('.media').fadeIn(2000);
}
var debounce = false;
function colorChange() {

    if (debounce) return;
    debounce = true;
    $('.centered').mouseenter(function() {
    $('.centered').fadeTo('fast', .25);
    });
    $('.centered').mouseleave(function() {
    $('.centered').fadeTo('fast', 1);
});
}

 function colorChange2() {
    $('.centered2').mouseenter(function() {
    $('.centered2').fadeTo('fast', .25);
});
$('.centered2').mouseleave(function() {
    $('.centered2').fadeTo('fast', 1);
});
}

function colorChange3() {
$('.centered3').mouseenter(function() {
    $('.centered3').fadeTo('fast', .25);
});
$('.centered3').mouseleave(function() {
    $('.centered3').fadeTo('fast', 1);
});
}

function closerFade() {
    $('.closer').hide();
    $('.closer').fadeIn(2000);
}

Я завернул все это в $(document).ready(function() {

Есть ли способ отговорить??

Answer 1

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

http://underscorejs.org/

debounce_.debounce(функция, ожидание, [немедленное]) Создает и возвращает новую отклоненную версию переданной функции, которая откладывает выполнение до истечения миллисекунд ожидания с момента последнего вызова. Полезно для реализации поведения, которое должно происходить только после того, как входные данные перестали поступать. Например: предварительный просмотр комментария к Markdown, пересчет макета после того, как размер окна перестает изменяться, и так далее.

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

Передайте true для непосредственного аргумента, чтобы вызвать debounce, чтобы вызвать функцию на ведущем, а не на заднем фронте интервала ожидания. Полезно при таких обстоятельствах, как предотвращение повторного двойного нажатия кнопки "Отправить" во второй раз.

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Answer 2

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

var debounce = null;
$('#input').on('keyup', function(e){
   clearTimeout(debounce );
   debounce = setTimeout(function(){
      $.ajax({url: 'someurl.jsp', data: {query: q}, type: 'GET'})
   }, 100);
});