Tampermonkey脚本作用域问题：如何在定时函数外使用变量

关键问题分析 #

• 定时器内部声明的const idElement是局部变量，外部无法访问；全局的idElement初始值固定，未被定时器更新。
• 按钮点击事件绑定错误：sendEmail(idElement)会立即执行函数，而非点击时触发。

修改后的完整代码 #

(function() {
  'use strict';

  // Créer le bouton
  var emailButton = document.createElement('button');
  emailButton.innerText = 'Envoyer un e-mail';
  emailButton.style.position = 'fixed';
  emailButton.style.bottom = '20px';
  emailButton.style.right = '20px';
  emailButton.style.zIndex = '9999';
  emailButton.style.padding = '10px';
  emailButton.style.backgroundColor = '#a83232';
  emailButton.style.color = 'white';
  emailButton.style.border = 'none';
  emailButton.style.borderRadius = '5px';
  emailButton.style.cursor = 'pointer';

  // 改用let声明，允许后续更新值
  let idElement = "rien";

  function recup(currentId) {
    if (currentId) {
      console.log('Valeur de l\'input:', currentId);
    } else {
      console.log('Élément input introuvable.');
    }
  }

  window.addEventListener('load', function() {
    setTimeout(function() {
      // 直接更新全局作用域的idElement，而非声明局部变量
      idElement = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner').value;
      console.log(idElement);
      emailButton.style.backgroundColor = '#38a832';
    }, 10000);
  });

  // Ajouter le bouton à la page
  document.body.appendChild(emailButton);

  // Fonction pour ouvrir l'application de messagerie par défaut avec des informations pré-remplies
  function sendEmail() {
    // 点击时使用当前的idElement值
    if (idElement === "rien") {
      alert("Veuillez attendre que la page charge complètement !");
      return;
    }
    
    var destinataire = 'kevin';
    var recipient = 'destinataire@example.com';
    var subject = 'Sujet de l\'e-mail';

    // Variables que vous pouvez définir
    var variable2 = 'Valeur de la variable 2';
    var variable3 = 'Valeur de la variable 3';
    // ... Ajoutez plus de variables si nécessaire

    // Corps de l'e-mail avec les variables
    var body = 'Contenu de l\'e-mail :\n\n';
    body += 'Variable 1 : ' + idElement + '\n';
    body += 'Variable 2 : ' + variable2 + '\n';
    body += 'Variable 3 : ' + variable3 + '\n';

    var mailtoLink = 'mailto:' + recipient + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
    window.location.href = mailtoLink;
  };

  // 绑定点击事件：传入回调函数，点击时执行sendEmail
  emailButton.addEventListener('click', sendEmail);

  // Appeler la fonction recup lorsque la page est complètement chargée
  // document.addEventListener('DOMContentLoaded', () => recup(idElement));
})();

核心改动说明 #

1. 变量作用域调整：将全局的const idElement改为let idElement，让定时器可以更新这个变量的值，而非创建局部变量覆盖它。
2. 定时器逻辑修正：删除无意义的return idElement，直接赋值给全局的idElement，确保外部能获取到最新的元素值。
3. 点击事件修复：将emailButton.addEventListener('click', sendEmail(idElement))改为emailButton.addEventListener('click', sendEmail)，避免函数立即执行，改为点击时触发。
4. 添加加载状态判断：在sendEmail中增加判断，如果idElement还是初始值，提示用户等待页面加载完成，避免发送无效数据。

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