如何防止 2 个 setInterval() 函数同时运行

Question

我有一个脚本每秒查看一次电话呼叫队列并向用户显示更新。 “现在我的代码将消息写入控制台以进行测试。”

由于我的代码每 1 秒运行一次，因此当用户打开多个表时，同一函数每秒调用 1 x“总标签”。如果我打开了 5 个选项卡，即每秒 5 个请求，这可能会给用户提供虚假信息或导致问题。

有没有办法让我只在活动选项卡上运行setInterval() 函数？我的代码必须在应用程序的每个页面上执行，以确保在有呼入电话或他或她需要注意的事情时通知用户。

这是每秒执行的代码。

<script>
$(function(){

    function isset(a, b){

        if(typeof a !== "undefined" && a){
            return a
        }

        return b;
    }

    setInterval(function() {

        $.getJSON("showMEssages.php", {method: "getMessages"}, function(data){

            if(typeof data.calls === 'undefined' || data.calls.length == 0 || !data.calls){
                console.log('No Messages');
                return;
            }

            $.each(data.calls, function(i, item){

                $.each(item, function(z, c){

                    var interactionId = isset(c.interactionId, 0);
                    var Eic_CallDirection = isset(c.Eic_CallDirection, '');
                    var Eic_State = isset(c.Eic_State, '');
                    var AccoRDI_mid = isset(c.AccoRDI_mid, '');
                    var Eic_RemoteAddress = isset(c.Eic_RemoteAddress, '');

                    if(Eic_State == '' || Eic_CallDirection == ''){
                        return;
                    }

                    //incoming call that is not answered
                    if( Eic_CallDirection == 'I' && Eic_State == 'A'){
                        console.log('Incomming Call From ' + Eic_RemoteAddress + ' MID: ' + AccoRDI_mid );
                        return;
                    }

                    //on hold
                    if( Eic_State == 'H'){
                        console.log('Phone number ' + Eic_RemoteAddress + ' is on hold' );
                        return;
                    }

                    //voicemail
                    if( Eic_State == 'M'){
                        console.log('Phone number ' + Eic_RemoteAddress + ' is on leaving a voicemail' );
                        return;
                    }

                    //connected call
                    if(Eic_State == 'C'){
                        console.log('Live Call With ' + Eic_RemoteAddress );
                        return;
                    }

                    //Dialling call
                    if(Eic_State == 'O'){
                        console.log('Dialling ' + Eic_RemoteAddress );
                        return;
                    }

                    //Dialling call
                    if(Eic_State == 'R'){
                        console.log('Outbound call is rining and waiting for answer ' );
                        return;
                    }

                    //Call Disconnected
                    if(Eic_State == 'I' || Eic_State == 'E' ){
                        console.log('Hungup with ' + Eic_RemoteAddress );
                        return;
                    }

                });
            });
        });

    }, 1000);
});
</script>

有任何替代解决方案吗？

Answer 1

您可以实现一些机制来同步不同选项卡之间的工作。主要思想是让标签相互通信

例如，一旦用户打开标签，您就会向频道广播一条消息，说“我正在寻找活动的标签”。然后活动选项卡（同频道收听）会响应：“我还活着”，新打开的选项卡不会启动间隔功能。否则它将开始间隔并将自己标记为活动。在实践中，您可能需要做其他事情来消除死锁（例如使用看门狗技术）

还有其他方法可以做到这一点，但总体思路是让选项卡相互通信

一些可能会帮助您实现它的库

https://github.com/tejacques/crosstab

https://github.com/diy/intercom.js/

Answer 2

我认为最好在执行setTimeout 回调之前有一个可以检查的标志，您可以使用window.onfocus 和window.onblur 知道选项卡是否具有焦点：

var tabHasFocus = true;
window.onfocus = function() {
   tabHasFocus = true;
}
window.onblur = function() {
   tabHasFocus = false;
}

setInterval(function() {
   if(tabHasFocus) {
      ...
   }
}, 1000);