javascript - Javascript - 如何使用不在同一范围内的 onClick 事件侦听器清除回调内的 setInterval
问题描述
我想完成以下任务:
按顺序发送 10 个 fetch 请求并测量每个请求的响应时间(以毫秒为单位)对于每个请求将响应时间推送到数组- 单击开始按钮 - 使用预定义的功能开始绘制点:
drawChart(data)
. 应以 1 秒的间隔添加点。 - 单击停止按钮 - 停止绘图。
我成功地以 1 秒的间隔绘制了图表。但是我无法理解的是,当在回调中定义时,如何clearInterval
在窗口上下文中进行操作。setInterval
停止按钮的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了解更多信息。
提前致谢!
解决方案
这似乎是一个范围问题。您需要interval
在这两个函数之外进行定义。然后它在函数的父范围内,因此它们都可以访问它。你现在这样做的方式只允许interval
从内部访问plotData
。此外,它需要是 alet
或var
因为每次单击相关按钮启动它时都会设置它并且const
s 不允许重新分配
推荐阅读
- circular-dependency - Angular如何解决“Circular dep for”错误
- javascript - 如何从使用chartjs创建的图形中获取图像
- javascript - 如何减少 v-select 组件中项目之间的空间
- php - 从 Slim 4 中的路由组覆盖注入的类?
- python - 尝试启动 Firefox 浏览器时出现 Python Selenium 错误
- c++ - 38:10:错误:成员引用基类型“节点 *”不是结构或联合 *prev->next = temp;
- android - FirebaseAuth Facebook 登录返回黑屏
- javascript - D3.js - 使用 JSON 对象数据的正负条形图
- amazon-web-services - 如何将使用 AWS Amplify 作为后端的前端部署到生产环境
- r - 在R中将字符月列转换为年月格式