滚动计数器 - _.debounce 修复

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 函数的结果。