Question

我要做的是创建一个只要按住鼠标按钮就可以连续调用另一个函数的函数。我这样做是为了让我更好地了解.call（）和回调。这是我的代码：

jQuery.fn.contmousedown = function(mousedownCallback){
  var interval, self = this;
  jQuery(this).mousedown(function(event){
    interval = setInterval(function(self, event){
      mousedownCallback.call(self, event);
      console.log('on');
    },0);
  });
  jQuery(this).mouseup(function(event){
    clearInterval(interval);
  });
}

$(document).contmousedown(function(e){
  $('#run').html(e.pageX+', '+e.pageY);
});

我收到的错误是：

Uncaught TypeError: Cannot read property 'pageX' of undefined

当然，我每秒钟收到大约300倍的费用。 :)如果我将我的间隔声明行更改为interval = setInterval(function(self){，那么我会以每秒约300x的速度登录到我的控制台，但是我输了这个事件。所以我的问题是如何才能实现它以便我可以回调函数并将其传递给事件参数？

Example - http://jsfiddle.net/ZxKxD/

<小时/> 在我上下班的路上考虑这个问题，我决定保留这两个事件会很好。所以这是我的最终代码：

jQuery.fn.mousehold = function(mousedownCallback){
  var interval, self = this, move_event;
  jQuery(this).mousemove(function(e){
    move_event = e;
  });
  jQuery(this).mousedown(function(click_event){
    interval = setInterval(function(){
      mousedownCallback.call(self, click_event, move_event);
    },0);
  });
  jQuery(this).mouseup(function(){
     clearInterval(interval);
  });
  jQuery(this).mouseout(function(){
     clearInterval(interval);
  });
}

$(document).mousehold(function(click_event, move_event){
  $('#run').html(click_event.pageX+':'+move_event.pageX+', '
                +click_event.pageY+':'+move_event.pageY);
});

Answer 1

setInterval不会将参数传递给回调，因此请删除self和event参数。你不会失去＆＃34;这样做的事件。

$.fn.contmousedown = function(mousedownCallback)
{
    var interval,
        self = this;

    $(this).mousedown(function(event)
    {
        interval = setInterval(function()
        {
            mousedownCallback.call(self, event);
            console.log('on');
        }, 0);
    });

    $(this).mouseup(function()
    {
        clearInterval(interval);
    });
}

演示：http://jsfiddle.net/mattball/9veUQ

那么如何才能连续更新光标位置？

使用mousemove捕获事件。

$.fn.contmousedown = function(mousedownCallback)
{
    var interval,
        self = this,
        event;

    $(this).mousemove(function(e)
    {
        event = e;
    });

    $(this).mousedown(function ()
    {
        interval = setInterval(function()
        {
            mousedownCallback.call(self, event);
        }, 0);
    });

    $(this).mouseup(function()
    {
        clearInterval(interval);
    });
};

演示：http://jsfiddle.net/mattball/dVaWS/

在setInterval函数内使用.call（）传递参数

1 个答案: