Jquery,取消绑定mousewheel事件,然后在操作完成后重新绑定它？

Question

我一直在努力解决这个问题.我正在使用这个代码来监控鼠标滚轮,因此它可以用于我使用的滑块进行滚动..但是,它有一个问题,操作排队等等如果你用鼠标滚动快速滚动(就像任何人会正常做的那样)它们会累积并导致错误的行为.我知道用动画来处理这类问题,但不是用鼠标滚轮监视器.

I want to do something like unbind the mousewheel at the start of the action (in this case, to scroll the scrollbar after mousewheel is moved) then rebind it after this, so if user does too many scrolls too fast it just ignores until the initial scroll is completed.. I tried the code below but its not rebinding so I'm not sure what I am doing wrong, any advice is appreciated.

        $("#wavetextcontainer").bind("mousewheel", function(event, delta) {

   //HERE IS WHERE EVENT IS UNBOUND:
     $("#wavetextcontainer").unbind("mousewheel");

        var speed = 10;
        var mySlider = $("#slider");
        var sliderVal = mySlider.slider("option", "value");

        sliderVal += (delta*speed);

        if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
        else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

        $("#slider").slider("value", sliderVal);

        event.preventDefault();

      // HERE I WANT TO REBIND THE EVENT:
     $("#wavetextcontainer").bind("mousewheel");

});

Answer 1

您需要存储函数,您可以引用它,如下所示:

function myHandler(event, delta) {
     $("#wavetextcontainer").unbind("mousewheel", myHandler);

        var speed = 10;
        var mySlider = $("#slider");
        var sliderVal = mySlider.slider("option", "value");

        sliderVal += (delta*speed);

        if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
        else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

        $("#slider").slider("value", sliderVal);

        event.preventDefault();

      // HERE I WANT TO REBIND THE EVENT:
     $("#wavetextcontainer").bind("mousewheel", myHandler);    
};

$("#wavetextcontainer").bind("mousewheel", myHandler);

通过这样做,您可以.bind()稍后调用相同的函数(您不能引用匿名函数).您当前正试图在没有函数的情况下调用来处理任何事情,但这不起作用.这也具有能够传递到相同的函数引用的附加优势,因此解除绑定唯一该处理程序,没有任何处理..bind() .unbind() mousewheel

或者,在没有取消/重新绑定的情况下执行此操作,如下所示:

$("#wavetextcontainer").bind("mousewheel", function (event, delta) {
  event.preventDefault();
  if($.data(this, 'processing')) return; //we're processing, ignore event

  $.data(this, 'processing', true);
  var speed = 10;
  var mySlider = $("#slider");
  var sliderVal = mySlider.slider("option", "value");

  sliderVal += (delta*speed);

  if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
  else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

  $("#slider").slider("value", sliderVal);
  $.data(this, 'processing', false);
});

这只是用来$.data()存储一个"我们正在工作"的数据条目与元素,如果有什么命中这个处理程序,它是真的,它只返回并忽略该事件.

Answer 2

在这种情况下,存在许多不必要的绑定/解除绑定,这比它必须更加困难和更低效.取消绑定对于在不再需要某个操作时释放资源很有用,或者暂时不需要; 但是对于不希望你的代码运行解除绑定/重新绑定的瞬间是很多开销,只需使用变量来确定是否遵守鼠标滚轮,并根据需要将其切换为true和false.可能也不需要使用jquery数据,只需在函数外定义一个更快的var.

var doMouseWheel = true;
$("#wavetextcontainer").bind("mousewheel", function(event, delta)
{
        // it'll just not do anything while it's false
        if (!doMouseWheel)
            return;

        // here's where you were unbinding, now just turning false
        doMouseWheel = false;

        // do whatever else you wanted

        // here's where you were rebinding, now just turn true
        doMouseWheel = true;
});

虽然老实说,只有在上面的几行过程中禁用滚动条的逻辑有点瑕疵,你必须是一个很多处理多线程语言的程序员:)在js中,它甚至不可能在另一个事件中触发函数的代码行,所以我假设您宁愿将其关闭一段时间(无论您使用变量还是绑定/取消绑定,这都适用):

var doMouseWheel = true;
$("#wavetextcontainer").bind("mousewheel", function(event, delta)
{
        // it'll just not do anything while it's false
        if (!doMouseWheel)
            return;

        // here's where you were unbinding, now just turning false
        doMouseWheel = false;

        // do whatever else you wanted

        // here's where you were rebinding, now wait 200ms and turn on
        setTimeout(turnWheelBackOn, 200);
});

function turnWheelBackOn() { doMouseWheel = true; }