Javascript - 如何使用不在同一范围内的 onClick 事件监听器清除回调内的 setInterval

Question

我想完成以下任务:

• 按顺序发送 10 个提取请求，并测量每个请求的响应时间(以毫秒为单位)
• 对于每个请求，将响应时间推送到数组
• 点击开始按钮 - 使用预定义函数开始绘制点:drawChart(data)。点应以 1 秒的间隔添加。
• 点击停止按钮 - 停止绘图。

<小时/>

我成功地以 1 秒的间隔绘制了图形。但是我无法集中注意力的是当 setInterval 时如何在窗口上下文中 clearInterval是在回调中定义的。停止按钮的 onclick 不会具有 setInterval 的范围。

onLoad 事件监听器:

window.onload = async function () {
   drawChart([]);
   const data = await fetchData(15);
   document.getElementById("start").onclick = () => plotData(data);

   // I want to be able to clearInterval on click of Stop button... but its not working...
   document.getElementById("stop").onclick = clearInterval(plotData);  
};

绘图/获取函数:

const plotData = (data) => {
  let i = 0;
  // How do i clear this interval outside of this function?
  const interval = setInterval( () => {
    i++;
    if (i === data.length) { clearInterval(interval); }
    let newData = data.slice(0,i);
    drawChart(newData); 
    console.log('draw');
  }, 1000);
}

const fetchData = async (times) => {
  let url = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1295/lounging-dog.jpg`;
  const data = [];
  for (let i = 0; i < times; i++) {
    start = (new Date()).getTime();
    await fetch(url)
      .then( res => {
        end = (new Date()).getTime();
        console.log('times', i+1);
        console.log('response milisec', end - start);            
        data.push({ xVal: i+1, yVal: end-start}); 
      })
      .catch( e => console.log(e));   
  }
  return data;
};

您还可以查看我的CodePen了解更多信息。

提前致谢!

Answer 1

这似乎是一个范围问题。您需要在两个函数之外定义间隔。然后它位于函数的父范围内，因此它们都可以访问它。您现在的方式只允许从 plotData 内访问 interval。此外，它需要是 let 或 var 因为每次单击相关按钮启动它时它都会被设置，并且 const不允许重新分配