页面按钮自动检测启用逻辑开发及回调函数错误排查咨询

Hey there! Let's fix that callback error and build the button detection logic you need, step by step.

First: Fixing the "callback argument must be a function" Error #

This error almost always pops up when you use a method like setTimeout or setInterval and pass something that isn't a function as the callback. For example, if you wrote code like this:

// ❌ Wrong: Executes location.reload() immediately, passes undefined to setTimeout
setTimeout(location.reload(), 10000);

The issue here is location.reload() runs right away, and its return value (undefined) gets passed to setTimeout instead of a function. The fix is to wrap your action in an arrow function or regular function:

// ✅ Correct: Passes a function that runs reload after 10 seconds
setTimeout(() => location.reload(), 10000);

That should eliminate the callback error entirely.

Second: Implementing the Button Detection & Refresh Loop #

We'll build a logic that checks if the button is enabled, waits 10 seconds and refreshes if not, and stops after 10 attempts. I'll show two approaches—one using async/await (easier to read) and one using recursive setTimeout (for environments where async isn't ideal).

Option 1: Async/Await Approach (Clean & Readable)

This uses a loop with await to handle the 10-second wait between refreshes:

async function waitForButton(maxAttempts = 10, waitTime = 10000) {
  let attempts = 0;

  while (attempts < maxAttempts) {
    attempts++;
    // Replace #controlled-button with your actual button selector
    const button = document.querySelector('#controlled-button');

    // Check if button exists and is enabled
    if (button && !button.disabled) {
      console.log('Button is enabled! Proceeding with next steps.');
      return true; // Signal success to trigger follow-up logic
    }

    // Stop if we've hit max attempts
    if (attempts >= maxAttempts) {
      console.log('Max attempts reached—button still not enabled.');
      return false;
    }

    // Wait and refresh
    console.log(`Button not enabled. Waiting ${waitTime/1000}s to refresh...`);
    await new Promise(resolve => setTimeout(resolve, waitTime));
    location.reload();
  }
}

// Run the function and handle the result
waitForButton().then(isEnabled => {
  if (isEnabled) {
    // Put your follow-up control flow here
    console.log('Executing post-button-enabled logic...');
  } else {
    // Handle the case where button never enabled
    console.log('Failed to detect enabled button. Executing fallback logic.');
  }
});

// Make sure the script runs after the page loads
document.addEventListener('DOMContentLoaded', () => waitForButton());

Option 2: Recursive setTimeout Approach

If you prefer not to use async/await, this recursive method works too—just make sure it re-runs after each page refresh:

function checkButtonStatus(attempts = 0, maxAttempts = 10, waitTime = 10000) {
  attempts++;
  const button = document.querySelector('#controlled-button');

  if (button && !button.disabled) {
    console.log('Button enabled! Starting next steps.');
    proceedWithNextSteps();
    return;
  }

  if (attempts >= maxAttempts) {
    console.log('Max attempts hit. Button remains disabled.');
    handleFallback();
    return;
  }

  console.log(`Attempt ${attempts}: Button disabled. Refreshing in ${waitTime/1000}s...`);
  setTimeout(() => {
    location.reload();
    // Re-run the check after page reloads
    window.addEventListener('DOMContentLoaded', () => {
      checkButtonStatus(attempts, maxAttempts, waitTime);
    }, { once: true });
  }, waitTime);
}

// Helper functions for your flow
function proceedWithNextSteps() {
  // Add your post-button-enabled logic here
  console.log('Running follow-up actions...');
}

function handleFallback() {
  // Add your fallback logic here
  console.log('Executing fallback plan.');
}

// Start the check when the page loads
window.addEventListener('DOMContentLoaded', () => checkButtonStatus());

Key Notes #

• Replace #controlled-button with your actual button's CSS selector (e.g., .enable-btn if it uses a class).
• Ensure the script loads after the DOM is ready—both examples use DOMContentLoaded to avoid "element not found" errors.
• If your button uses a different state indicator (not the disabled attribute), adjust the check (e.g., look for a class like btn-enabled).

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