当选项卡未处于活动状态时暂停 jquery 函数

我有一个在搜索发生时运行的函数(每 5 秒调用一次(。当它正在运行"检索结果..."在纸上写出来，一次一个字母。这工作正常，但是如果用户转到其他选项卡，然后返回，则消息将变为："Rvsei.tn.rg.i eRveisnugl tRse"。然后在接下来的几个周期中，它又回到了应有的状态。我想知道是否有办法在选项卡再次成为活动选项卡时重新启动该功能。虽然看到这种情况发生很有趣，但这不是我的意图。这是我拥有的功能：

var showText = function (target, message, index, interval) {   
if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
function Loading() {
    $("#loading").html('');
    showText("#loading", "Retrieving Results...", 0, 200);
}

编辑：我想知道它是否与调用加载函数的函数有关。我注意到，只有当我在另一个标签上应该刷新时，才会发生这种情况，而且你离开的时间越长，情况就越糟糕，这表明当你返回时，它可能尝试调用加载尽可能多的次它应该一次全部。这是我的计时器：

var refreshInterval = 5 * 1000,
isDone = false;
if (!isDone) {
setTimeout(test_function, refreshInterval)
}

所以我想我需要弄清楚如何暂停这个计时器。

我已经更新了我的回复以满足您的需求。这将对我有用。必要的功能是"模糊"和"焦点"，你应该将它们绑定到窗口对象。离开时，保存当前索引。用户查看选项卡后，函数必须再次继续。

//编辑：

我已经更新了你的小提琴。检查这个： http://jsfiddle.net/t6ouo762/3/

<head>
        <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="loading"></div>
    <script type="text/javascript">
    var isOnTab = true;
    var myTarget = "#loading";
    var myText = "Retrieving Results...";
    var myIndex = 0;
    var myInterval = 200;
        $(document).ready(function() {
            Loading();
            $(window).bind("blur", function() {
                isOnTab = false;
            });
            $(window).focus(function() {
                if(!isOnTab)
                {
                    isOnTab = true;
                    showText(myTarget,myText,myIndex,myInterval);
                }
            });
        });

        var showText = function (target, message, index, interval) { 
            myIndex = index;
            if (index < message.length && isOnTab) {
                $(target).append(message[index++]);
                setTimeout(function () { 
                    showText(target, message, index, interval); 
                    }, interval);
            }
        }
        function Loading() {
            $("#loading").html('');
            showText(myTarget,myText,myIndex,myInterval);
        }
    </script>
</body>

相关内容

最新更新

热门标签：