我想完成以下任务:
按顺序发送 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了解更多信息。
提前致谢!
最佳答案
这似乎是一个范围问题。您需要在两个函数之外定义间隔。然后它位于函数的父范围内,因此它们都可以访问它。您现在的方式只允许从 plotData
内访问 interval
。
此外,它需要是 let
或 var
因为每次单击相关按钮启动它时它都会被设置,并且 const
不允许重新分配
关于Javascript - 如何使用不在同一范围内的 onClick 事件监听器清除回调内的 setInterval,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57930053/