Я хочу, чтобы моя функция setTimeout перезагружалась, когда я сразу нажимаю ее снова во время щелчка - PullRequest
Новая
       15

Я хочу, чтобы моя функция setTimeout перезагружалась, когда я сразу нажимаю ее снова во время щелчка

0 голосов
/ 04 июля 2018

Итак, я создаю анимацию букв, появляющихся одну за другой каждые 25 миллисекунд, чтобы завершить предложение, но всякий раз, когда я нажимаю кнопку, и предложение не заканчивается, пропущенные буквы перекрывают другое предложение.

Предполагалось, что это будет «Согласиться с условиями и политикой» другое предложение - «Вы согласились с нашими условиями и политиками», но я нажал кнопку, когда он только что закончил «Вы согласились с нашими условиями», поэтому оставшиеся буквы «и Политики» добавляются в «Согласен». к нашим Условиям и Политике »и станьте такими. Просто так:

enter image description here 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);    

        });
    }

});
...