Question

我有一个在搜索过程中运行的函数（每隔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);
}

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

var refreshInterval = 5 * 1000,
isDone = false;

if (!isDone) {
setTimeout(test_function, refreshInterval)
}

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

Answer 1

我已根据您的需求更新了我的回复。这对我有用。必要的功能是＆＃34;模糊＆＃34;和＃34;焦点＆＃34;，你应该绑定到window-Object。离开时，保存当前索引。用户查看选项卡后，该功能必须再次进行。

//编辑：

我已经更新了你的小提琴。检查一下：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>

选项卡未激活时暂停jquery功能

1 个答案: