继续功能，直到释放鼠标为止

Continue function until mouse is released

本文关键字：鼠标 释放 功能 继续      更新时间：2023-09-26

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

    $('#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) '});
    });

此问题已在：jQuery continuous mousedown 中解决

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

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

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);
    });

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

var lock = true;
$('#md').mousedown(function() {
    lock = false;
    setTimeout(function() {
        while(!lock) {
            // Do your stuff here
        }
    }, 0);
});
$(document).mouseup(function() {
    lock = true;
});

我希望这能奏效。setTimeout函数分离函数的执行并创建一个异步进程，这使代码不受阻塞。

我相信还有更复杂的方法来解决这个问题。只是我还没喝咖啡

这样？制作一个全局布尔变量来跟踪鼠标是否向上，然后在鼠标向下时循环函数。

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

--edit：当mouseup时，将ismouseup设置为true。很抱歉

您可以使用setTimeout。当鼠标放下时，这将每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);
        }
    });

作为一个选项，您可以在mousedown中设置mousemove的处理程序，并在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');
});

Jsfffle示例写得不理想，但你可以得到的想法

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

相关文章：