Question

我正在生成多个图表，每个图表都有自己的setInterval来刷新数据。当移除动态生成的容器时，我将它设置为clearInterval - 但是如果我重新加载并且它具有相同的id，则旧的setInterval继续运行。有没有办法设置动态命名的setInterval，可以在生成替换时停止？

现在我正在使用：

function generateChart(data, location){
    var chart = new Highcharts.Chart({
        // blah blah blah
    }, function(chart){
        setInterval(function(){
            if($('#'+location).length){
                // I'm doing stuff every minute
            }else{
                clearInterval();
            }
        },60000);
    });
}

发生的情况是，该位置是随机生成的字符串，该字符串成为Highchart容器的元素ID，如果用户保存图表，则该字符串将成为唯一标识符。如果用户更新了已保存并重新加载图表的图表，则旧图表将获取.removed（）并在其位置生成新图表。现在，新的元素ID与旧的元素ID相同，并且由于旧的间隔找到了它想要的容器，它会尝试继续更新 - 这是因为它的图表变得很糟糕。

有没有办法设置一个我可以用于setInterval的动态变量，以便我可以在它上面使用clearInterval？

var blob+location = setInterval(function(){ ...

然后

clearInterval(blob+location);

Answer 1

你可以使用一个对象：

var myObj = {};

var location = "somevalue";

myObj[location] = setInterval(...

clearInterval(myObj[location]);

Answer 2

停止使用setInterval，改为使用setTimeout（How do I execute a piece of code no more than every X minutes?）：

function generateChart(data, location) {

    var element = $('#'+location);

    var chart = new Highcharts.Chart({
        // blah blah blah
    }, foo);

    var foo = function() {

        if(element){

            // I'm doing stuff every minute

            setTimeout(foo, 6000);
        }

    };

}

要停止它，只需避开setTimeout或make element = null。

也许我的代码有点不对（我现在正在睡觉），但问题是使用setTimeout和闭包。

如果在foo内部，因为setTimeinterval会再次调用它，因此长时间超过6秒会遇到麻烦，请注意http://www.youtube.com/watch?feature=player_detailpage&v=i_qE1iAmjFg#t=462s，这样你就可以确保在最后完成的东西后6秒运行

我将这个例子放在后代：

http://jsfiddle.net/coma/vECyv/2/

var closure = function(id) {

    var n = 0;
    var go = true;

    $('#' + id).one('click', function(event) {

        go = false;

    });

    var foo = function() {

        if(go) {

            console.log(id, n++);
            setTimeout(foo, 1000);

        }

    };

    foo();
};

closure('a');
closure('b');

Answer 3

好吧 - 因为我似乎无法理解你的一些答案，所以我决定采用低技术。

function genToken(){
    var num = Math.floor(Math.random() * 10000);
    var token = 't-' + num;
    return token;
}

function genLocation(){
    var chartToken = genToken();
    var newChart = '<div id="'+location+'" data-token="'+chartToken+'"></div>';
    $('#chartHome').append(newChart);
}

// inside my chart function

var token = $('#'+location).data('token');
setInterval(function(){
    if( $('[data-token="'+token+'"]').length ){
        // still there - keep going
    }else{
        // all gone - time to stop
        clearInterval();
    }
},60000);

现在我做的时候：

$('#'+location).remove();

如果我生成一个具有相同位置ID的新图表，那么令牌也会消失并且不会相同。

Answer 4

不确定是否有人仍在寻找此解决方案，但我遇到了此问题并选择了以下方法。

对于任何动态创建需要根据某些事件停止的私人/匿名间隔的人。您可以简单地将间隔保存在一个变量中，然后将该变量传输到 html 元素中的数据属性中。

// Outer scope
let pos = 1
let interval = setInterval(() => {
    if (pos < 700) {
      pos++;
    }
    htmlEl.style.top = pos + "px";
});

htmlEl.setAttribute("data-interval", interval)

这将保存您的时间间隔的数字标识符，前提是该 html 元素位于您的 DOM 中。

然后，稍后您可以简单地提取此数据属性并使用它来取消间隔。

let intervalId = document.querySelector("#someElement").dataset.interval;
clearInterval(intervalId);

停止动态生成的setInterval

4 个答案: