Detect Держите мышь-Click в Javascript

Question

Вот мой код:

var mouseDown = false; 

document.body.onmousedown = function() { 
    console.log("MOUSE DOWN"); 
    mouseDown = true; 
    increaseRad(); 
} 
document.body.onmouseup = function() { 
    console.log("MOUSE UP"); 
    mouseDown = false; 
} 

function increaseRad(){ 
    rad = 0; 
    while(mouseDown){ 
    console.log("mouse is still down"); 
    rad++; 
    console.log(rad) 
    } 
} 

Когда я нажимаю вниз, increaseRad запускается, но цикл в то время как внутри никогда не заканчивается.

Любая идея, почему?

Answer 1

Проблема в том, что ваш код работает как цикл блокировки.

while(mouseDown){ 
    console.log("mouse is still down"); 
    rad++; 
    console.log(rad) 
} 

Браузер оценивает Javascript в одном потоке и эта петля никогда не будет пауза, чтобы браузер обрабатывает эти обработчики событий.

Вместо этого вы можете просто использовать асинхронные функции для прослушивания событий mousedown, а затем запустить таймер. Если мышь по-прежнему опускается, когда таймер заканчивается, вы можете считать это длинным кликом.

var mouseIsDown = false; 

window.addEventListener('mousedown', function() { 
    mouseIsDown = true; 
    setTimeout(function() { 
    if(mouseIsDown) { 
     // mouse was held down for > 2 seconds 
    } 
    }, 2000); 
}); 

window.addEventListener('mouseup', function() { 
    mouseIsDown = false; 
}); 

Эти асинхронные действия (addEventListener, setTimeout) не будет блокировать основной поток.