jquery - 我希望我的 setTimeout 函数在单击期间立即再次按下它时重新启动

Question

所以，我创建了一个每 25 毫秒一个字母出现的动画来完成句子，但是每当我点击按钮并且句子没有完成时，丢失的字母会与另一个句子重叠。

它应该是“同意条款和政策”，另一句话是“您已同意我们的条款和政策”，但我在完成“您已同意我们的条款”时单击了按钮，所以剩下的在“同意我们的条款和政策”上添加“和政策”的字母，变成这样。就像这样：

HTML

<div class ="d-flex mb-4 my-2">
                        <div class = "d-flex mr-3">
                            <div class = "checkmark" style="position:relative; background: black; width:2.5em; transform: scale(.7);">
                                <div class = "checkmark2"></div>
                            </div>
                        </div>
                        <p class = "mb-0 p1">Agree to Terms and Policies</p>
                        <p class = "mb-0 p2" style="display:none"></p>
                    </div>
JQUERY:

var showText = function (target, message, index, interval) {    
                  if (index < message.length) { 
                    $(target).append(message[index++]); 
                    setTimeout(function(){showText(target, message, index, interval);},interval); 
                  } 
                }


$('.signupmodalborder .checkmark2').click(function(){

    if(checkbox == 0)
    {
        checkbox++;
        $('.signupmodalborder .checkmark2').css({"background":"#f1c500"});
        $('.signupmodalborder .checkmark2').append("<style> .signupmodalborder .checkmark2:after{background: #f1c500}</style>");
        $('.signupmodalborder .checkmark2').append("<style> .signupmodalborder .checkmark2:before{background: #f1c500}</style>");
        $('.signupmodalborder').find('p').text("");
        $('.signupmodalborder p').css({"font-weight":"bold"});
        $(function () { 

            showText(".signupmodalborder p", "You've agreed to our Terms and Policies",0, 25);    

        }); 
        clearTimeout(showText);

    }
    else
    {

        checkbox = 0;
        $('.signupmodalborder .checkmark2').css({"background":"white"});
        $('.signupmodalborder .checkmark2').append("<style> .signupmodalborder .checkmark2:after{background: white}</style>");
        $('.signupmodalborder .checkmark2').append("<style> .signupmodalborder .checkmark2:before{background: white}</style>");
        $('.signupmodalborder').find('p').text("");
        $('.signupmodalborder p').css({"font-weight":"normal"});
        $(function () { 

            showText(".signupmodalborder p", "Agree to our Terms and Policies", 0, 25);    

        });
    }

}); 

标签： jquerysettimeout