这段代码之后 JavaScript 停止工作

Question

我编写此代码是为了实现类似 cmd 控制台的打字效果。代码本身工作正常，但我在它后面放置的任何代码都不起作用。我已经尝试解决这个问题有一段时间了，但我陷入了困境。

这是问题的 JSFiddle。 http://jsfiddle.net/GWj4b/

/**
 * CONSOLE
 */

setInterval(cursorBlink, 500);
function cursorBlink() {
    if($('#cursor').css('visibility') == 'hidden'){
        $('#cursor').css({'visibility': 'visible'});
    } else {
        $('#cursor').css({'visibility': 'hidden'});
    }
}

var text = $('#type').html();
var text = text.replace(/<br>/g, '_');

$('#type').html('');

$.each(text.split(''), function(i, letter) {
    setTimeout(function(){
        if(letter == '_'){
            $('#type').html($('#type').html() + '<br />');
        } else {
            $('#type').html($('#type').html() + letter);
        }
    }, 100 * i);
});

Answer 1

如果您查看控制台日志，您会看到:Uncaught TypeError: Cannot call method 'replace' of undefined

当您调用替换时，文本未定义，因为您要查找的元素不存在。

你可以这样测试一下是否存在

if(text) {
  text.replace(/<br>/g, '_');
}

如果遇到这样的运行时错误，Javascript 将停止执行。

考虑了解有关使用 Chrome 的 dev tools 调试此类问题的更多信息或浏览器中的等效项。一旦您看到错误，就很清楚是哪一行导致了问题。

顺便说一句，在添加您尝试引用的元素后，代码就会执行。如果它们可能不存在，您需要检查代码，无论如何，这是一个好习惯。

http://jsfiddle.net/GWj4b/1/