如何在JavaScript中实现按右键后循环执行代码至myVariable为false

Got it! Let's break down how to make this work properly—since we're dealing with browser events, we need to avoid blocking the main thread (which would freeze your page), so asynchronous loops are the way to go. Here are two common scenarios based on what you might mean:

Scenario 1: Start executing code when right-click is pressed, keep going until myVariable becomes false #

This triggers the loop as soon as you right-click, and it runs non-stop until myVariable is set to false (even if you release the right button).

var myVariable = true;
let intervalId; // Store the timer ID to clear it later

// First, block the default right-click context menu to avoid interference
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

// Listen for right-click press (mousedown event, button 2 = right mouse button)
document.addEventListener('mousedown', function(e) {
  if (e.button === 2) {
    // If there's already a running timer, clear it first to avoid duplicates
    if (intervalId) clearInterval(intervalId);
    
    // Start the asynchronous loop
    intervalId = setInterval(function() {
      // 👇 Replace this with your custom code to execute
      console.log('Running your code...');
      
      // Check if we need to stop: if myVariable is false, clear the timer
      if (!myVariable) {
        clearInterval(intervalId);
        intervalId = null; // Reset the ID for future clicks
      }
    }, 100); // Adjust this interval (in ms) to control how often your code runs
  }
});

Key notes: #

• setInterval runs your code repeatedly at the specified interval without blocking the browser.
• We clear any existing timer before starting a new one to prevent multiple loops from running if you right-click multiple times.
• The contextmenu event listener stops the default right-click menu from popping up, which makes the interaction cleaner.

Scenario 2: Execute code only while the right button is held, plus stop when myVariable is false #

If you want the code to stop when you release the right button or when myVariable becomes false, add a mouseup listener (and optionally mouseleave to handle cases where the mouse moves off the page):

var myVariable = true;
let intervalId;

document.addEventListener('contextmenu', e => e.preventDefault());

// Start the loop on right-click press
document.addEventListener('mousedown', e => {
  if (e.button === 2) {
    if (intervalId) clearInterval(intervalId);
    
    intervalId = setInterval(() => {
      // 👇 Your custom code here
      console.log('Running while right button is held...');
      
      // Stop if myVariable is false
      if (!myVariable) {
        clearInterval(intervalId);
        intervalId = null;
      }
    }, 100);
  }
});

// Stop the loop when right button is released
document.addEventListener('mouseup', e => {
  if (e.button === 2 && intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
});

// Also stop if the mouse leaves the page (prevents stuck loops)
document.addEventListener('mouseleave', () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
});

For smoother animations/visual updates: Use requestAnimationFrame #

If your code is for animations or needs to sync with the browser's render cycle, replace setInterval with requestAnimationFrame—it runs your code right before the browser repaints, avoiding jank:

var myVariable = true;
let rafId;

function runMyCode() {
  // 👇 Your custom code here (great for animations)
  console.log('Running in sync with browser render...');
  
  // Keep looping only if myVariable is true
  if (myVariable) {
    rafId = requestAnimationFrame(runMyCode);
  }
}

document.addEventListener('contextmenu', e => e.preventDefault());

document.addEventListener('mousedown', e => {
  if (e.button === 2) {
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(runMyCode);
  }
});

// Optional: Stop on right button release
document.addEventListener('mouseup', e => {
  if (e.button === 2 && rafId) {
    cancelAnimationFrame(rafId);
    rafId = null;
  }
});

Just swap out the console.log lines with your actual code, and adjust the interval (for setInterval) or let requestAnimationFrame handle the timing for smooth visual work.

内容的提问来源于stack exchange，提问作者user9363416