javascript - JavaScript变量是否“失焦”？

我有一个函数（请参阅下文），将消息写到屏幕上。只要您正在积极查看正在运行的页面，它就可以很好地打印出来；但是，假设您正在另一个选项卡中观看视频，然后切换回写出该功能的选项卡，则文本杂乱无章。例如：“这是一条消息。”通常会像“ t isa hismg esseg”一样混乱地出现。

有问题的功能：

参数：

讯息：字串

对象：HTML对象

function writeMessage(message,object){
    var i = 0;
    var interval = setInterval(function(){
        if(i < message.length){
            object.append(message.substr(i,1));
            i++;
        }else{
            clearInterval(interval);
        }
    }, 25);
}

知道为什么会这样吗？

最佳答案

我还没有测试过，但是如果评论说的是对的，那么您应该能够通过手动链接各个延迟的操作来避免这种情况。不必定义一个时间间隔，您应该能够调用一个超时（setTimeout函数），该超时将字母附加到对象上，然后递归调用自身，同时将其余消息传递给递归调用。

在这种情况下，如果设备没有为您的异步操作提供处理器时间，则至少不会创建和执行后续操作-因为只有第一个（现在正在等待）操作中的代码才能执行该操作。

或者，您可以使用Reactive Extensions生成一个可观察的间隔，您可以在该间隔上订阅并使用消息更新对象。如果您不熟悉反应式编程，那么它可能对您来说是一个巨大的新话题，但是我可以肯定地推荐它-如果只是作为一个脑筋急转弯来了解另一种编程方法。

关于javascript - JavaScript变量是否“失焦”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20231142/