Question

所以我有一个类型编写器效果，响应标签的点击。单击选项卡后，内容框将更改并开始键入效果，相应的选项卡也会更改。但是，如果我单击选项卡，然后单击选项卡1然后选项卡2，然后快速连续或甚至适度连续返回选项卡1，内容框的文本将突然结束，类型效果不会打印出所有文本

func main() {
    foo := New().(*Faz)
    log.Println(foo)
}

我认为我可以将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/

如果连续单击不同的选项卡，如何防止文本被截断？

1 个答案: