javascript - 滚动事件上的单个函数调用？

Question

前面的问题: 我怎样才能更改此脚本，以便为向上或向下滚动进行简洁的单一函数调用？

这是一个 JSFiddle 清楚地代表了问题。

以下脚本根据用户的滚动方向成功推送了一个告警:

//Firefox
$('html').on('DOMMouseScroll', function(e){
    var delta = e.originalEvent.detail;

    if (delta > 0) {

        alert('You scrolled up');

    } else if (delta < 0) {

        alert('You scrolled down');
    }

});

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

if (delta < 0) {

    alert('You scrolled down');

} else if (delta > 0) {

    alert('You scrolled up');
}
});

但是有一个问题: 当我向上或向下滚动时，如果用户向上或向下滚动，该函数会被调用多次，而不是仅仅执行一次。

因此，我的问题是:我如何更改此脚本，以便为向上或向下滚动发生简洁的单一函数调用？

已知解决方案: Underscore.js 提供了一个功能

_.debounce(<function>,delay)  

但这会导致延迟并导致错误修复。

Answer 1

您可以使用一个简单的基于标志的解决方案

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

    if (flag != 1 && delta < 0) {
        flag = 1;
        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");

    } else if (flag != 2 && delta > 0) {
        flag = 2;
        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");
    }
});

演示:Fiddle

你也可以将这两个处理程序组合在一起

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

    if (flag != 1 && delta < 0) {
        flag = 1;
        $(".notify").append("<p>You scrolled down</p>");
    } else if (flag != 2 && delta > 0) {
        flag = 2;
        $(".notify").append("<p>You scrolled up</p>");
    }
});

演示:Fiddle