单击选项卡或自动切换选项卡并暂停其他选项卡时，动画开始

Question

There are typewriter animation in all tabs(dart, PHP) whenever I reloads the page animations in all the tabs start at a time but I want it to start when a tab like PHP is clicked or automatically opens. I've code animation in Script tag not css animation.

在这段代码中，动画会在 Chrome 浏览器重新加载时立即开始。我希望特定选项卡的动画在它的按钮被点击或自动打开时开始。意味着每当屏幕或该选项卡对屏幕动画可见时开始，而不是在屏幕不可见时

                                 <ul id="tabs">
                                    <li>
                                        <a data-toggle="tab" href="#about">dart</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#advantages">PHP</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#usage">CSS</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#usage">Python</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#usage">java</a>
                                    </li>
                                </ul>

// code for typewriter animation

<script type="text/javascript">
    document.onload = function setupTypewriter(t) {
    var HTML = t.innerHTML;

    t.innerHTML = "";

    var cursorPosition = 0,
        tag = "",
        writingTag = false,
        tagOpen = false,
        typeSpeed = 100,
      tempTypeSpeed = 0;

    var type = function() {
      
        if (writingTag === true) {
            tag += HTML[cursorPosition];
        }

        if (HTML[cursorPosition] === "<") {
            tempTypeSpeed = 0;
            if (tagOpen) {
                tagOpen = false;
                writingTag = true;
            } else {
                tag = "";
                tagOpen = true;
                writingTag = true;
                tag += HTML[cursorPosition];
            }
        }
        if (!writingTag && tagOpen) {
            tag.innerHTML += HTML[cursorPosition];
        }
        if (!writingTag && !tagOpen) {
            if (HTML[cursorPosition] === " ") {
                tempTypeSpeed = 0;
            }
            else {
                tempTypeSpeed = (Math.random() * typeSpeed) + 50;
            }
            t.innerHTML += HTML[cursorPosition];
        }
        if (writingTag === true && HTML[cursorPosition] === ">") {
            tempTypeSpeed = (Math.random() * typeSpeed) + 50;
            writingTag = false;
            if (tagOpen) {
                var newSpan = document.createElement("span");
                t.appendChild(newSpan);
                newSpan.innerHTML = tag;
                tag = newSpan.firstChild;
            }
        }

        cursorPosition += 1;
        if (cursorPosition < HTML.length - 1) {
            setTimeout(type, tempTypeSpeed);
        }

    };

    return {
        type: type
    };
}

var typer = document.getElementById('typewriter3');

typewriter = setupTypewriter(typewriter3);

typewriter.type();
</script>

// code for auto switching tabs 
<script type="text/javascript">
 $(document).ready(function () {
            var timeInterval, tabCount = 0, currnetIndex = 1;
            tabCount = $('ul#tabs').find('li a').length;
            var tabContentObj = $('.tabContent');
            changeTabIndex();
            timeInterval = setInterval(function () { changeTabIndex(); }, 20 * 1000);

            function changeTabIndex() {
                if (currnetIndex > tabCount) {
                    currnetIndex = 1;
                }
                tabContentObj.hide();
                $('ul#tabs').find('li.selected').removeClass('selected');
                var currentAncorObj = $('ul#tabs').find('li a').eq(currnetIndex - 1);
                currentAncorObj.parent().addClass('selected');
                $(currentAncorObj.attr('href')).show();
                currnetIndex++;
            };

            $('#tabs li').mouseenter(function () {
                clearInterval(timeInterval);
            }).mouseleave(function () {
                timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 5000);
            });

            $('#tabs li a').click(function () {
                tabContentObj.hide();
                $('ul#tabs').find('li.selected').removeClass('selected');
                var currentAncorObj = $(this);
                currnetIndex = $('ul#tabs').find('li a').index($(this)) + 1;
                currentAncorObj.parent().addClass('selected');
                $(currentAncorObj.attr('href')).show();
                currnetIndex++;

                //return false;
            });
            $(document).ready(function(){
            $('.active').tab('show');
});
        });
</script>