需求来源

之前的案例中介绍了EChart可视化控件，可以实现个性化数据可视化，但是用户往往不希望看到一个静止不动的结果，而是希望在DWF后端收集数据到前端以后，将前端界面上展示的效果更新，如下面所示：

虽然，前面的案例中介绍了使用订阅控件在后端实现定期刷新的方法，这种方法的轮询逻辑是在服务器上运行的。如果只是希望前端能够通过脚本快速获得数据并进行显示，使用订阅控件就显得难以操作。

本文将介绍一种前端定期刷新的简便的方式，完成动态数据显示的目的。

背景知识

在介绍具体操作之前，先了解一些背景知识。

首先，在定时刷新之前，需要学习一些背景知识，其中第一个是如何设置定时器，由于DWF使用的是JavaScript，所以直接利用以下两个方法设置定时器即可。

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
clearInterval() ：在指定的毫秒数后调用函数或计算表达式。

setInterval返回一个定时器变量，可以作为clearInterval的参数，终止定时器。

第一个参数是一个函数，说明到达时间点的时候具体执行什么样的逻辑。

第二个参数是一个以毫秒为单位的周期，1000毫秒=1秒。

如下面的代码所示，其定时运行10秒以后，自动停止，其中：

var i = 0;
var timer = setInterval(function () {
    i++;
    if(i === 10) {
         clearInterval(timer);
    }
}, 1000);

其次，在DWF基础培训中已经介绍了控件和控件上面的事件这一概念，例如：按钮控件上存在“单击事件”，文本框控件上存在“值变化事件”，这些事件上可以绑定操作，当交互发生的时候操作就会激活。

在DWF中，也可以通过前端脚本模拟事件调用，例如：模拟按钮单击事件，具体方法是通过调用invokeEvent实现，如下所示：

var btn = this.getAddinById("Operation1");
btn.invokeEvent("单击事件");

上述代码表示得到表单中代号“Operation1”的按钮，然后通过invokeEvent模拟触发“单击事件”，invokeEvent函数的参数对应画布右侧，选项区控件事件清单中事件的中文名。

需要特别，特别，特别注意的是：不要进行在事件的脚本中利用invokeEvent嵌套调用，避免出错。

由于控件的事件可以通过脚本激活，前端刷新的技术路线就非常明确了：

第一步、在表单上基于DWF控件实现一个基础表单，可以利用动态数字框，EChart控件展示数据。

第二步、在该表单上设置一个刷新按钮，绑定单击事件，利用脚本从后端获取数据，到前端利用控件的函数动态刷新。

第三步、在表单初始化的时候启动定时器，或者设置另外的按钮，手动启动的按钮启动定时器。

第四步、每当到达定时器指定的时间间隔，则调用刷新按钮的invokeEvent刷新，完成动态变化。

接下来，以教学使用的搅拌车管理系统为背景，实现按照每2秒刷新，从后台统计搅拌车总报警数和总工单数的仪表盘的例子：