如何执行与当前点击链接内data字符串匹配名称的函数？

嘿，我来帮你搞定这个问题！要实现点击链接就触发对应名称的函数，同时结合你提到的setInterval(progressSim, 40)来启动进度模拟，咱们可以按以下步骤来做：

核心思路 #

1. 给你的链接添加自定义data属性，用来存储要触发的函数名称
2. 给所有目标链接绑定点击事件，点击时读取data属性里的函数名
3. 验证函数存在后执行它，同时处理定时器的启停（避免多个定时器冲突）

具体实现代码 #

第一步：HTML部分（给链接加data属性）

假设你的链接是这样的，我们给每个链接加上data-func-name属性，值对应你那两个函数的名称：

<a href="#" data-func-name="countTo94">触发94%计数</a>
<a href="#" data-func-name="countTo54">触发54%计数</a>

第二步：JavaScript部分

结合你提到的现有函数和定时器逻辑，我们补充事件绑定和函数调用的代码：

// 先声明全局变量，用来存储定时器实例和目标进度
let sim;
let targetProgress = 0;

// 你第47行的函数：计数到94%
function countTo94() {
  targetProgress = 94;
  // 先清除之前的定时器，防止多个定时器同时运行
  clearInterval(sim);
  // 启动进度模拟定时器
  sim = setInterval(progressSim, 40);
}

// 你第115行的函数：计数到54%
function countTo54() {
  targetProgress = 54;
  clearInterval(sim);
  sim = setInterval(progressSim, 40);
}

// 你提到的progressSim函数（负责更新canvas进度）
function progressSim() {
  // 这里写你的进度更新逻辑，比如逐步增加当前进度直到达到targetProgress
  // 示例逻辑：
  let currentProgress = /* 你的当前进度变量 */;
  if (currentProgress < targetProgress) {
    currentProgress += 1;
    // 更新canvas的绘制
    updateCanvas(currentProgress);
  } else {
    // 达到目标后清除定时器
    clearInterval(sim);
  }
}

// 绑定点击事件的逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带有data-func-name属性的链接
  const triggerLinks = document.querySelectorAll('a[data-func-name]');
  
  triggerLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 阻止链接默认的跳转行为
      e.preventDefault();
      
      // 从data属性中获取要执行的函数名称
      const funcName = this.dataset.funcName;
      
      // 检查这个函数是否存在，避免报错
      if (typeof window[funcName] === 'function') {
        // 执行对应的函数
        window[funcName]();
      } else {
        console.error(`找不到名为 ${funcName} 的函数，请检查函数名是否正确！`);
      }
    });
  });
});

关键细节说明 #

• data属性的使用：data-*是HTML5的自定义属性规范，通过element.dataset可以轻松读取属性值（比如data-func-name对应dataset.funcName）
• 定时器管理：每次启动新的定时器前一定要用clearInterval(sim)清除旧的，否则多个定时器会同时修改进度，导致混乱
• 函数作用域：确保你的两个计数函数（countTo94和countTo54）是全局作用域的（或者在事件处理函数能访问到的作用域内），这样window[funcName]才能正确找到它们

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