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_.debounce（功能，等待，[立即]）创建并返回   传递函数的新debounced版本将推迟它   执行直到自上次经过等待毫秒之后   它被调用的时间。用于实现仅应该执行的行为   在输入停止到达后发生。例如：渲染a   预览Markdown注释，在窗口后重新计算布局   已停止调整大小等等。

在等待间隔结束时，将使用该函数调用该函数   最近通过去辩论函数的论据。

对于立即参数传递true会导致debounce触发   函数在前导而不是等待的后沿   间隔。在防止意外情况下很有用   双击第二次点击“提交”按钮。
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中的去抖功能？

2 个答案: