Event during a loop

Question

I have this code:

let release = false;
document.querySelector(".class").onmouseup = () => {
    release = true;
}
document.querySelector(".class").onmousedown = (e) => {
    if (e.button === 0) {
        release = false;
        while (!release) {
            console.log("click pressed")
        }
    }
}

But when i click, the event onmouseup is not toggled and the loop doesn't stop. How i can make this is work ?

Don't use a while loop for this. You can use something like `setInterval(() => console.log("click pressed")` because while loops are running in the whole process and block others from executing. — ChalanaN, Dec 31 '20 at 17:03
Since the value of release can never change, your code can never exit that loop, regardless of anything else that happens. — Russ, Dec 31 '20 at 17:03
Related, probably [duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+while+loop+with+mouse+event+condition+never+stops): [Why does a while loop block the event loop?](https://stackoverflow.com/q/34824460/4642212). — Sebastian Simon, Dec 31 '20 at 17:05
Yes i know, but there is the event onmouseup who in theories have to change the value of the var release, and stop the loop — Binary_Serox, Dec 31 '20 at 17:06
@user4642212 related perhaps, but not duplicated. This is javascript. Not node. (might be same language, but the application is completely different) — Bruce, Dec 31 '20 at 17:07
@Bruce “Application” is irrelevant. The language is the same, the _environments_ are different: Node vs. browser (or Web, depending on context). Still, the reason and the culprit for this behavior is fundamentally the same, even if event loops are implemented differently in each environment. There’s currently no environment in which such a `while` loop wouldn’t block execution. — Sebastian Simon, Dec 31 '20 at 17:28
@Binary_Serox What are you trying to do? A color picker is better implemented with a `mousemove` event, not with a loop. — Sebastian Simon, Dec 31 '20 at 17:29
Please add the solution in the answer space below. Do not edit the body of the question with your answer. — Dharman, Dec 31 '20 at 18:39

score 0 · Answer 1 · answered Dec 31 '20 at 17:05

0

As a commenter said : Dont use infinite loops. That will block code execution.

You have almost a working code. Try this :

  let release = false;
  document.querySelector(".class").onmouseup = () => {
    release = true;
    console.log('click released');
  }
  document.querySelector(".class").onmousedown = (e) => {
    if (e.button === 0) {
        release = false;
        console.log("click pressed")
    }
  }

If i get your idea, that should be it.

answered Dec 31 '20 at 17:05

Bruce

66
5

i have to use a loop to do an action in loop until the click is release – Binary_Serox Dec 31 '20 at 17:11
@Binary_Serox What exactly do you need to do, while the button is down?, unfortunately you cant use a while loop that blocks the main event loop. – Keith Dec 31 '20 at 17:15
@Binary_Serox , If you give us more information on what you want to accomplish, we might help better.You might be better off using async functions. (a loop will block execution, and the one in the code is perfect to completely block the browser) – Bruce Dec 31 '20 at 17:30

score 0 · Accepted Answer · answered Jan 01 '21 at 19:56

I have found a solution:

let colorPickerLoop;
document.querySelector(".class").onmouseup = () => {
    clearInterval(colorPickerLoop)
    console.log('click released');
}
document.querySelector(".class").onmousedown = (e) => {
    colorPickerLoop = setInterval(() => {
        console.log("click pressed")
    }, 10)
}

It's not best thing to do i think but it's working

Event during a loop

2 Answers2