用户控件内的 JavaScript 不运行

Question

我在使用用户控件和 JavaScript 时遇到问题。

我有一个用户控件，里面有一个计时器。用户控件本身(在 .ascx 文件中)内的 JavaScript 每 5 秒更新一次计时器。在运行时，我的用户控件的几个实例在同一页面内的 UpdatePanel 内实例化。

当我的用户控件只有一个实例时，计时器工作得很好。但是当有多个实例时，只有最后一个实例的计时器每 5 秒更新一次，其余的则不会。

这是我的脚本:

var start = new Date('<%=session.startTime%>');
var stat = '<%=session.status%>'

UpdateValues();
AutoUpdateValues();

function AutoUpdateValues(){
    setInterval(function () {
        UpdateValues();
    }, 5000);
}

function UpdateValues() {
    //update time elapsed
    var totalSec = Math.ceil((new Date() - start) / 1000); //time elapsed in seconds
    var hr = Math.floor(totalSec/3600);
    var min = Math.floor((totalSec % 3600)/60);
    var sec = totalSec % 60;
    if (stat == 2) {
        $('#<%=lblTimeElapsed.ClientID%>').text(hr + "h " + min + "m " + sec + "s" );
    }
}

---

[更新]

var amnt = $('#<%=lblAmount.ClientID%>');
var start = new Date('<%=session.startTime%>');
var stat = '<%=session.status%>';

<%=this.ClientID %>UpdateValues();
<%=this.ClientID %>AutoUpdateValues();

function <%=this.ClientID %>AutoUpdateValues() {
    setInterval(<%=this.ClientID %>UpdateValues, 5000);
}

function <%=this.ClientID %>UpdateValues() {
    //update time elapsed
    var totalSec = Math.ceil((new Date() - start) / 1000); //time elapsed in seconds
    var hr = Math.floor(totalSec / 3600);
    var min = Math.floor((totalSec % 3600) / 60);
    var sec = totalSec % 60;
    if (stat == 2) {
        $('[id^="<%=this.ClientID %>lblTimeElapsed"]').text(hr + "h " + min + "m " + sec + "s");
    }
}

Answer 1

setInterval 函数每次启动都会创建一个新对象。如果您使用多个实例，则应创建一个 setInterval 构造函数数组。