我希望在单击期间立即再次按下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);    

        });
    }

});