带有日历的 jQuery 鼠标滚轮

Question

我知道有几个关于鼠标滚轮和滚动的问题；我不确定它们中的任何一个是否适用于我的具体问题。如果他们这样做了，那么我很抱歉提出这个问题。

不过，我正在使用带有 FullCalendar 的 jQuery。更具体地说，我输入了一个小函数来触发日历在鼠标滚动时向前或向后跳转。它适用于典型的老式滚轮。但是，当使用 Apple Magic Mouse 时，它​​的滚动太多了！我正在使用的当前代码是：

 $('#my_calendar')
    .bind('mousewheel', function(event, delta) {
    var view = $('#monthCalendar').fullCalendar('getView');

    if (view.name == "month") {
                if (delta > 0) { $(this).fullCalendar('prev'); }
                if (delta < 0) { $(this).fullCalendar('next'); }
                return false;
    }
 });

如果用户使用 Magic Mouse（或类似的），我该如何解决这个问题，它可能会限制向前或向后滚动的月份数？

任何帮助都会很棒！谢谢。

Answer 1

您是否尝试过“去抖动”功能？这与下划线框架略有不同：

function debounce(func, wait) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        func.apply(context, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  };

生成的代码如下所示：

 function debounce(func, wait) {
      var timeout;
      return function () {
          var context = this, args = arguments;
          var later = function () {
              timeout = null;
              func.apply(context, args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
      };
  };

  var scrolldb = debounce(handleScroll, 200);

  $('#my_calendar').bind('mousewheel', scrolldb);

  function handleScroll(event, delta) {
      var view = $('#monthCalendar').fullCalendar('getView');

      if (view.name == "month") {
          if (delta > 0) {
              $(this).fullCalendar('prev');
          }
          if (delta < 0) {
              $(this).fullCalendar('next');
          }
          return false;
      }
  }

优化 'wait' 参数，直到它与 Magic Mouse 顺利配合。我用滚动板和魔术鼠标对此进行了测试。