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

Inside your event handler function you have a reference to the particular element that was clicked on in this, so you should be able to store the reference to the timer as a property of that element:

$('<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 に答える