Question

我在使用用户控件和JavaScript方面遇到了麻烦。

我有一个用户控件，里面有一个计时器。计时器每5秒钟由用户控件本身内的JavaScript更新（在.ascx文件中）。在运行时，我的用户控件的几个实例在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构造函数的数组。

Answer 2

每次添加相同的控件时，asp.net都会使用相同的页面重复它，这会导致在页面中重复使用相同代码和函数名称的脚本部分

由于ASP.NET重命名控件，您需要依赖＆lt;％= this.ClientID =＆gt;

并只更新具有值

的所有控件

 $('[id*="lblTimeElapsed"]').text("set value");

我的解决方案是在你的函数名称上添加前缀

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

设立

$('#<%=lblTimeElapsed.ClientID%>').text("set value");

使用此

$('[id^="<%=this.ClientID %>lblTimeElapsed"]').text("set value");

所以当你调用方法时会是这样的

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

另一个解决方案可以在这里解决一个问题，即同时调用一个方法到一组控件，运行很多函数就是使用单例对象，如下所示。

用户控件内的JavaScript无法运行

2 个答案: