2

一直在寻找去抖功能或在 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() {

有办法去抖吗？？

4

2 回答 2

25

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

var debounce = null;
$('#input').on('keyup', function(e){
   clearTimeout(debounce );
   debounce = setTimeout(function(){
      $.ajax({url: 'someurl.jsp', data: {query: q}, type: 'GET'})
   }, 100);
});
于 2019-03-26T03:54:47.947 回答
-1

我只会在我的项目中包含 underscore.js 并使用它包含的 debounce 函数。它工作得很好。我在多个项目中使用过它。

http://underscorejs.org/#debounce

debounce_.debounce(function, wait, [immediate]) 创建并返回传递函数的新去抖动版本，该版本将推迟其执行，直到自上次调用以来等待毫秒过去后。对于实现仅在输入停止到达后才应发生的行为很有用。例如：渲染 Markdown 注释的预览，在窗口停止调整大小后重新计算布局等等。

在等待间隔结束时，将使用最近传递给去抖动函数的参数调用该函数。

为立即参数传递 true 以使 debounce 在等待间隔的前沿而不是后沿触发函数。在防止意外双击“提交”按钮再次触发等情况下很有用。

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
于 2017-08-09T17:52:41.147 回答