javascript - AmCharts 3 - 首次运行时删除侦听器(自身内部的引用函数)
问题描述
我想知道如何添加一个只运行一次的监听器,我相信最后这主要是一个通用的 javascript 问题,但我可能会遗漏一些东西。
这是我所拥有的:
const listener = chart.addListener('rendered', () => {
console.log('Chart rendered! This should only print once!');
doSomethingToChart(chart);
chart.removeListener(chart, 'rendered', listener);
})
这里的问题是,没有删除监听器,console.log 在每次渲染上打印。我怎样才能解决这个问题?
解决方案
addListener
根本没有返回值,也没有在文档中提及任何返回值,这就是您的代码不起作用的原因。只需在添加列表器之前单独存储函数引用,然后调用removeListener
该引用即可,例如:
let counter = 0;
const listener = () => {
console.log('dataUpdated called', counter += 1);
};
chart.addListener('dataUpdated', listener);
let timer = setInterval(() => {
chart.validateData(); //triggers dataUpdated
if (counter == 3) {
chart.removeListener(chart, 'dataUpdated', listener);
console.log('dataUpdated removed')
chart.validateData(); //one more call to confirm that the listner no longer runs
clearInterval(timer);
}
}, 1500);
演示:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"categoryField": "country"
}, 100);
let counter = 0;
const listener = () => {
console.log('dataUpdated called', counter += 1);
};
chart.addListener('dataUpdated', listener);
let timer = setInterval(() => {
chart.validateData(); //this triggers dataUpdated
if (counter == 3) {
chart.removeListener(chart, 'dataUpdated', listener);
console.log('dataUpdated removed')
chart.validateData(); //confirm that listner isn't called anymore
clearInterval(timer);
}
}, 1500);
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
推荐阅读
- java - 我们如何手动重置通过 Spring Boot Java 应用程序使用的 kafka 主题的偏移量?
- angular - 在自定义元素(Web 组件)中使用 mat-select 会打开 shadow DOM 之外的选项
- htmlunit - HtmlUnit:检查HtmlElement是否为HtmlAnchor
- java - 超过整数最大值的解决方案?
- javascript - JavaScript:基于正则表达式预定义顺序的排序算法
- xcode - Xcode 10 “appletv 很忙:准备调试器支持 Apple tv”
- python - 错误“表体没有剩余数据,“list-table”指令要求。” 同时为 Flask 应用程序自动生成 Sphinx 文档
- angular - 如何在 Angular 应用程序中包含额外的 ES6 源代码
- bash - 如何在 BSD tar 路径替换选项中转义字符
- google-apps-script - 由脚本设置的可安装 onOpen 触发器不会在 Apps 脚本中运行