Question

我的问题

我创建了一个计数器，用于每次用户向上或向下滚动时升高或降低一个。问题是我的柜台

$('html').on('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        --count;
        transitionScreen(count);
        //$('h1').text ('You scrolled down');

    } else if (delta > 0 && count < 0) {
        ++count;
        transitionScreen(count);
        //$('h1').text ('You scrolled up');
    }
});

通过滚动递增多次。

解决方案

所以有人建议使用underscore.js debounce function来保持我的计数器功能不会在给定的时间内执行多次。

问题是我不知道如何实施解决方案：

有人可以帮我使用_.debounce这个功能吗？我正在查看这些示例，但并不完全了解如何在此处使用它。我是javascript的新手并且很快就把它拿起来，所以任何帮助都会非常感激。

文档裁剪

Debounce在文档中使用如下：

debounce_.debounce(function, wait, [immediate])

这是一个使用示例：

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

谢谢！

Answer 1

$('html').on('mousewheel', _.debounce(function(e){
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        --count;
        transitionScreen(count);
        //$('h1').text ('You scrolled down');

    } else if (delta > 0 && count < 0) {
        ++count;
        transitionScreen(count);
        //$('h1').text ('You scrolled up');
    }
}, 250));

就是这样。就像它显示的那样，不是传递你的函数，而是传递_.debounce函数的结果。

滚动计数器 - _.debounce修复

1 个答案: