记一次echarts的mouseout事件多次触发导致的定时器异常执行问题
页面上有一个echarts折线和柱形图，已有程序定时显示tooltip，现需要开发后续功能，点击折线图和柱形图时打开新的遮罩弹出层，然后bug就出现了，多次打开弹出层后，原有的定时显示tooltp的定时器乱了。
原代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="./plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="./plugins/echarts.min.js"></script> <script src="./plugins/jquery/jquery-3.3.1.js"></script> <script src="./plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div id="main" style="height: 300px"></div> <div id="myModal" class="modal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content p-2 pt-4" style="height: 550px"></div> </div> </div> </body> <script> const myModal = new bootstrap.Modal(document.getElementById("myModal")); </script> <script> var chartDom = document.getElementById("main"); var myChart = echarts.init(chartDom); var option; option = { tooltip: { trigger: "axis", axisPointer: { type: "cross", }, formatter: function (param) { let str = ""; str += '<span style="font-weight:bold;"><?php //echo date("m-d", strtotime($date)); ?>' + param[0].name + "</span><br/>"; str += param[0].marker + param[0].seriesName + ' : <span style="float:right;font-weight:bold;margin-left:20px;">' + param[0].value + " pcs</span><br/>"; str += param[1].marker + param[1].seriesName + ' : <span style="float:right;font-weight:bold;margin-left:20px;">' + param[1].value + " pcs</span><br/>"; return str; }, }, xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { name: "s1", data: [120, 200, 150, 80, 70, 110, 130], type: "bar", }, { name: "s2", data: [150, 230, 224, 218, 135, 147, 260], type: "line", }, ], }; option && myChart.setOption(option); myChart.on("click", function (params) { if (params.componentType === "series") { if (params.seriesType === "line" && params.seriesIndex === 1) { myModal.show(); console.log(new Date()); } else if (params.seriesType === "bar" && params.seriesIndex === 0) { myModal.show(); console.log(new Date()); } } }); function func() { var dataLen = option.series[0].data.length; currentIndex = (currentIndex + 1) % dataLen; // 显示 tooltip myChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: currentIndex, }); console.log(new Date()); } let currentIndex = -1; var timer = setInterval(func, 2000); myChart.on("mouseover", function () { clearInterval(timer); console.log("mouseover"); }); myChart.on("mouseout", function () { timer = setInterval(func, 2000); console.log("mouseout"); }); </script> </html>
原来效果：tooltip隔2s自动弹出
多次点击柱形图或者折线图打开遮罩弹出层后
发现定时器执行乱了，mouseout事件触发了多次导致多个同时器同时运行，考虑mouseout事件重设定时器之前先清除定时器，看能不能解决问题：
myChart.on("mouseout", function () {
clearInterval(timer);
timer = setInterval(func, 2000);
console.log("mouseout");
});
多次打开遮罩弹出层后，定时器正常执行，问题解决。由下图可以看出，mouseout事件触发了多次导致多个同时器同时运行。因此在设定新的定时器之前，先清除之前的定时器可以解决问题。
