Question

我希望能够在鼠标停止时连续运行以下功能。目前，该功能每次点击一次。我希望能够在mousedown时继续运行该功能，并在释放鼠标时停止。

    $('#md').mousedown(function(e){
         var pCords = e.pageY +e.pageY;
         var max = $(document).height()+$(document).width();
             var dg = 2*( pCords / max );
         $('#div').css({ 'transform':'rotate('+dg+'deg) '});
    });

Answer 1

此问题已在：jQuery continuous mousedown

中解决

它将涉及设置一个标志，您可以在第一个mousedown事件发生时将其设置为true，并调用一个函数，只有在mouseup事件发生时将标志设置回false时才会结束。

Answer 2

您可以使用简单的信号量来完成。这是一个例子：

var lock = true;

$('#md').mousedown(function() {
    lock = false;

    setTimeout(function() {
        while(!lock) {
            // Do your stuff here
        }
    }, 0);
});

$(document).mouseup(function() {
    lock = true;
});

我希望这可以解决问题。 setTimeout函数会分离函数的执行并创建一个异步进程 - 这会使您的代码无阻塞。

我确信有更复杂的方法可以解决这个问题。只是我还没喝咖啡。：）

Answer 3

像这样？制作一个全局布尔变量来跟踪鼠标是否已启动，然后在鼠标停在该元素上时循环你的函数。

 var ismouseup = false;

 $(document).ready(function(){
      $('#md').mousedown(function(e){
         ismouseup = false;
         while(!ismouseup)
        {
            //do your thing
        }
    });

    $('#md').mouseup(function(e){
        ismouseup = true;
    }
});

- 编辑：当mouseup时将ismouseup设置为true。遗憾。

Answer 4

执行事件处理程序之间的时间延迟很简单：

var timerId = 0;

$('#md').mousedown(function(e){
             timerId = setInterval(function() {
                         var pCords = e.pageY +e.pageY;
                         var max = $(document).height()+$(document).width();
                         var dg = 2*( pCords / max );
                         $('#div').css({ 'transform':'rotate('+dg+'deg) '});
                 }, 20); // specify the required time delay here
            });

 $('#md').mouseup(function(e){
        clearInterval(timerId);
    });

Answer 5

您可以使用setTimeout。当mousedown时，这将每1秒运行一次

 $('#md').on({
        mousedown: function () {
            $(this).data('clicked', true);
            var process = function() {
                if ($(this).data('clicked')) {
                   // Do your stuff
                    setTimeout(process, 100);
                }
            };
            process();
        },
        mouseup: function () {
            $(this).data('clicked', false);
        }
    });

Answer 6

作为一个选项，您可以在mousemove中为mousedown设置处理程序，并在代码中删除mouseup

function movehandler(e) {
    var pCords = e.pageY + e.pageY;
    var max = $('#md').height();
    var dg = 20 * (pCords / max);
    $('#md').css({
        'transform': 'rotate(' + dg + 'deg) '
    });
}
$('#md').mousedown(function (e) {
    $('body').on('mousemove', movehandler);
});
$('#md').mouseup(function (e) {
    $('body').off('mousemove');
});
$('body').mouseleave(function (e) {
    $('body').off('mousemove');
});

Jsfiffle 示例不是理想的，但你可以理解

编辑：请注意，$('body').on('mousemove',可能不足以取决于您的标记。

继续功能，直到释放鼠标

6 个答案: