非同步启动Javascript间隔，并在三次运行后停止

我有一个让OpenLayer标记闪烁三次的功能。仅显示控制台消息的简化版本：

function blink_three_times(layername){
var x = 0;
    setTimeout(function() {
        blink_in = setInterval(function() {
            x = x+1;
            if ( x === 3) {clearInterval(blink_in)};
            console.log(layername + ' is visible');
        }, 500);
    }, 250);

    blink_out = setInterval(function() {
        if (x === 2) {clearInterval(blink_out)};
        console.log(layername + ' is invisible');    
    }, 500);
};

---

它工作正常，但如果在一次完成之前多次启动，计数器（x）将超过3，并且间隔不会停止。如何避免这种情况？

这是因为您在全局范围内有函数

blink\u in

&

blink\u out

。当您第二次调用它时，它会覆盖函数的定义

使用var将它们定义为本地的

var blink_in = setInterval(function() {..})

及

---

您的变量blink\u in和blink\u out是全局变量，因此如果您多次调用该函数，它们将覆盖该函数，因此无法正确停止间隔

在您的功能范围内使用它们，方法是使用“var”来定义它们，以避免出现问题（请参阅）

---

根据你上次的更新问题

您还可以创建一个更动态的视图，以跟踪实际被闪烁的图层，这是一个可能的示例

function Blinker(opt) {
    var ts = {};

    this.elementId = opt ? opt.elementId : undefined;
    this.runs = (opt ? opt.runs : 3) || 3;
    this.completed = (opt ? opt.completed : function() { }) || function() { };

    this.start = function(arg) {
        var timestamp = arg || this.elementId, that = this;
        if (typeof ts[timestamp] !== 'undefined') {
            console.log('Cannot run multiple times on same layer');
            return;
        }
        ts[timestamp] = {
            timestamp: timestamp,
            count: 0, 
            element: document.getElementById(arg || this.elementId),
            controller: this
        };
        setTimeout(function() {
            ts[timestamp].showInterval = setInterval(that.setVisibility.bind(ts[timestamp], true), 500);
        }, 250);
        ts[timestamp].hideInterval = setInterval(this.setVisibility.bind(ts[timestamp], false), 500);
    };

    this.setVisibility = function(visible) {
        this.element.style.visibility = visible ? 'visible' : 'hidden';
        this.element.style.display = visible ? 'inherit' : 'none';
        if (visible) {
            this.count++;
        }
        if (!visible && this.count === 2)
        {
            clearInterval(this.hideInterval);
        }
        if (visible && this.count === 3)
        {
            clearInterval(this.showInterval);
            this.controller.completed.apply(this.controller, [this.element.id]);
            delete ts[this.timestamp];
        }
    };
}

var blinker = new Blinker({
    elementId: 'blinker',
    runs: 3,
    completed: function(elementId) {
        var log = document.getElementById('log');
        log.innerHTML += '<p><strong>' + elementId + '</strong> has finished blinking</p>';
    }
});

功能闪烁器（opt）{
var ts={}；
this.elementId=opt？opt.elementId:未定义；
this.runs=（opt？opt.runs:3）| 3；
this.completed=（opt？opt.completed:function（）{}）| | function（）{}；
this.start=函数（arg）{
var timestamp=arg | | this.elementId，that=this；
如果（ts的类型[时间戳]！==“未定义”）{
log（'不能在同一层上运行多次'）；
返回；
}
ts[时间戳]={
时间戳：时间戳，
计数：0，
元素：document.getElementById（arg | | this.elementId），
控制员：这个
};
setTimeout（函数（）{
ts[timestamp].showInterval=setInterval（即.setVisibility.bind（ts[timestamp]，true），500）；
}, 250);
ts[timestamp].hideInterval=setInterval（this.setVisibility.bind（ts[timestamp]，false），500）；
};
this.setVisibility=函数（可见）{
this.element.style.visibility=可见？'visible'：'hidden'；
this.element.style.display=可见？'inherit'：'none'；
如果（可见）{
这个.count++；
}
如果（！visible&&this.count==2）
{
clearInterval（this.hideInterval）；
}
如果（可见&&this.count==3）
{
clearInterval（this.showInterval）；
this.controller.completed.apply（this.controller[this.element.id]）；
删除ts[这个时间戳]；
}
};
}
var闪烁器=新闪烁器({
elementId:'闪烁器'，
跑步次数：3次，
已完成：函数（elementId）{
var log=document.getElementById（'log'）；
log.innerHTML+=''+elementId+'已完成闪烁
'；
}
});

你可以在这里找到小提琴：

function blink_three_times(layername){
    var x = 0;
    var blink_in, blink_out;
    setTimeout(function() {
        blink_in = setInterval(function() {
            x = x+1;
            if ( x === 3) {clearInterval(blink_in)};
            console.log(layername + ' is visible');
        }, 500);
    }, 250);
    blink_out = setInterval(function() {
        if (x === 2) {clearInterval(blink_out)};
        console.log(layername + ' is invisible');    
    }, 500);
};

function Blinker(opt) {
    var ts = {};

    this.elementId = opt ? opt.elementId : undefined;
    this.runs = (opt ? opt.runs : 3) || 3;
    this.completed = (opt ? opt.completed : function() { }) || function() { };

    this.start = function(arg) {
        var timestamp = arg || this.elementId, that = this;
        if (typeof ts[timestamp] !== 'undefined') {
            console.log('Cannot run multiple times on same layer');
            return;
        }
        ts[timestamp] = {
            timestamp: timestamp,
            count: 0, 
            element: document.getElementById(arg || this.elementId),
            controller: this
        };
        setTimeout(function() {
            ts[timestamp].showInterval = setInterval(that.setVisibility.bind(ts[timestamp], true), 500);
        }, 250);
        ts[timestamp].hideInterval = setInterval(this.setVisibility.bind(ts[timestamp], false), 500);
    };

    this.setVisibility = function(visible) {
        this.element.style.visibility = visible ? 'visible' : 'hidden';
        this.element.style.display = visible ? 'inherit' : 'none';
        if (visible) {
            this.count++;
        }
        if (!visible && this.count === 2)
        {
            clearInterval(this.hideInterval);
        }
        if (visible && this.count === 3)
        {
            clearInterval(this.showInterval);
            this.controller.completed.apply(this.controller, [this.element.id]);
            delete ts[this.timestamp];
        }
    };
}

var blinker = new Blinker({
    elementId: 'blinker',
    runs: 3,
    completed: function(elementId) {
        var log = document.getElementById('log');
        log.innerHTML += '<p><strong>' + elementId + '</strong> has finished blinking</p>';
    }
});