1

下面的div被附加到一个 jQuery 弹出对话框，并在对话框关闭时被删除。

背后的想法是通过单击按钮来切换自动刷新图表数据。

$('<div/>', {
    style: "position:absolute; top:39px; left:34px;z-index:1",
    click: function(){
        var imgSrc = $(this).find("img").attr('src');
        if(imgSrc=="images/green-circle.png"){
            imgSrc="images/black-circle.png";
            //how to stop calling the refresh function?  <--------------
        }
        else{
            imgSrc="images/green-circle.png";
            //Call refresh function every 60 sec
        }
        $(this).find("img").attr('src', imgSrc);
    }
    }).prepend('<img id="theImg"  width="20" height="20" src="images/black-circle-md.png" />').prependTo($(divHolder).parent());

以下是如何启动和停止计时器的示例：

var timer;

function startTimer() { 
    timer=setInterval(function(){refreshData()},1000);  
}

function stopTimer() { 
    learInterval(timer); 
}

refreshData(){
    // do some work here
}

截屏

在此处输入图像描述

问题是，如何在函数timer内的点击之间保持对 var的引用click: function(){}？因为可以有不止一个弹出对话框处于活动状态。应该可以为不同的弹出对话框独立地刷新数据。

4

1 回答 1

1

在您的事件处理函数中，您可以引用在 中单击的特定元素this，因此您应该能够将对计时器的引用存储为该元素的属性：

$('<div/>', {
    style: "position:absolute; top:39px; left:34px;z-index:1",
    click: function(){
        var imgSrc = $(this).find("img").attr('src');
        if(imgSrc=="images/green-circle.png"){
            imgSrc="images/black-circle.png";
            clearInterval(this.refreshTimer);
            this.refreshTimer = null;
        }
        else{
            imgSrc="images/green-circle.png";
            this.refreshTimer = setInterval((function() {
                 refreshData(this); // your refreshData function probably needs to know which div to refresh
            }).bind(this), 60000);
        }
        $(this).find("img").attr('src', imgSrc);
    }
})
于 2013-10-08T14:32:30.480 回答