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 并使用它包含的去抖功能。它很好用。我在多个项目中使用过它。

http://underscorejs.org/#debounce

debounce_.debounce(function, wait, [immediate]) Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

At the end of the wait interval, the function will be called with the arguments that were passed most recently to the debounced function.

Pass true for the immediate argument to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Answer 2

我不喜欢包含一个仅用于去抖功能的库的想法。你可以这样做：

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

Jquery 中的去抖功能？

Debounce function in Jquery?

javascript

jquery

debounce