javascript - 如何防止连续单击不同选项卡时文本被 chop ？

Question

所以我有一个打字机效果，可以响应选项卡的单击。单击选项卡后，内容框将发生变化并开始打字效果，相应的选项卡也会发生变化。但是，如果我单击一个选项卡，例如选项卡 1，然后单击选项卡 2，然后快速连续甚至中等连续地返回选项卡 1，内容框的文本会突然结束，并且类型效果不会打印出所有文本.

$(document).ready(function () {
    $('div#tab-wrapper div.myTabs').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('div.content').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
        typeWriterEffect(tab_id, document.getElementById(tab_id).innerHTML, 50);
    });
});

var timer;

function typeWriterEffect(id, sentence, speed) {
    var index = 0; //reset index
    clearInterval(timer); //clear old timer
    document.getElementById(id).innerHTML = ""; //clear it immediately to prevent flicker on click
    timer = setInterval(function () {
        var char = sentence.charAt(index);
        if (char === '<') index = sentence.indexOf('>', index);
        document.getElementById(id).innerHTML = sentence.substr(0, index);
        index++;
        if (index === sentence.length) {
            clearInterval(timer);
        }
    }, speed);
}

我想我可以将innerHTML文本存储到data()方法中，但这似乎不起作用，或者也许我做错了，结果相同。

无论如何，这是一个 JSFiddle我刚才谈到的一切。

Answer 1

这可能是因为每次调用 typeWriterEffect() 时都会清除全局计时器。尝试将其用作局部变量，在函数内部声明。

$(document).ready(function () {
    $('div#tab-wrapper div.myTabs').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('div.content').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
        typeWriterEffect(tab_id, document.getElementById(tab_id).innerHTML, 50);
    });
});
var timer;
function typeWriterEffect(id, sentence, speed) {
    var self = this;
    var index = 0; //reset index
    self.timer = setInterval(function () {
        var char = sentence.charAt(index);
        if (char === '<') index = sentence.indexOf('>', index);
        document.getElementById(id).innerHTML = sentence.substr(0, index);
        index++;
        if (index === sentence.length) {
            clearInterval(self.timer);
        }
    }, speed);
    clearInterval(self.timer); //clear old timer
    document.getElementById(id).innerHTML = ""; //clear it immediately to prevent flicker on click
}

http://jsfiddle.net/7V4NA/34/