Продолжайте работать до тех пор, пока мышь не будет отпущена.

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

Легкий способ сделать с задержкой по времени между выполнением обработчика событий:

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

--edit: set ismouseup to true, когда мышь. Прости.

Answer 4

Этот вопрос был рассмотрен в: jQuery continuous mousedown

Он будет включать в себя создание флага, который вы можете установить к истине, когда происходит первое событие MouseDown и вызова функции, которая финиширует только после того, как установлен флаг обратно false, когда происходит событие mouseup.

Answer 5

Вы можете использовать SetTimeout. Это будет работать раз в 1 сек, когда MouseDown

$('#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 Пример не идеально написано, но вы можете получить идею

EDIT: Обратите внимание, что $('body').on('mousemove', может быть недостаточно в зависимости от вашей разметки.