Help please, there is a function, the essence of it is to make the effect of the text that is typed. That is, when you switch a slide, it takes 2 phrases: one will be invisible, the second is taken and one character is typed. After the function ends the slide switches and everything is new. That code which I show, the worker. But I also need to improve it somehow so that I can complete it ahead of time and switch to the second slider. Just something brains can not reach it. I would be grateful for any hint.

You can see his crooked robot when switching here.

http://klucik2016.psdcoding.co/en/

function writetext(prev,timeOneC){ var word = '', pos = '', newWord = '', i = 0, g = 0, sub = ''; sub = $('.topHomeBlock .slider .slick-active .subTitle'); //получаю текст в слайдере pos = $('.topHomeBlock .slider .slick-active .title'); //получаю второй текст в слайдере pos.addClass('vis'); word = pos.text(); pos.text(''); timeoutW(); //функция которая добавляет по одной букве к слову за один вызов, когда дойдем до конца вторая фраза будет видна function timeoutW() { if (i < word.length){ setTimeout(function () { i++; newWord += word.charAt(i); pos.text(newWord); timeoutW(); }, timeOneC); } if(i === word.length){ pos.addClass('blick'); sub.addClass('vis'); setTimeout(function () { pos.removeClass('blick'); timeoutR(); }, timeOneC * 15); } } //функция которая удаляет по одному символу за вызов function timeoutR() { setTimeout(function () { if (g < word.length){ g++; newWord = word.substring(g); pos.text(newWord); timeoutR(); } }, timeOneC/3); if(g === word.length && auto){ if(prev){ $('.topHomeBlock .slick-prev').click(); //предыдущий слайд }else{ $('.topHomeBlock .slick-next').click(); // следующий слайд } sub.removeClass('vis'); //убираю класс чтобы текст стал невидим pos.text(word).removeClass('vis'); //убираю класс чтобы текст стал невидим writetext(false,150); //вызываю функции снова } } } writetext(false, 150);
  • why do you need auto? - ThusMad
  • @ThusMad Removed. I tried to rewrite it. Well, not a success. And forgot to delete the variable. - Bohdan Sych
  • You need to, when switching to another slide, the text from the previous one goes away and a new one appears, I understand correctly? - ThusMad
  • @ThusMad When switching, all text should be restored but it will not be visible. This is necessary so that when the circle of all slides passes, it will work again. On another slide, another text. - Bohdan Sych
  • When you press the button on the slider button, another writetext() starts, and the old one does not finish, while the 2nd robots still work first (then at the end of the first one, the slide switches and it begins to create everything you noticed). Try pressing the slider button to restore the text on the previous one and make it wait for its turn (either by pressing the button or by ending the previous slide) ... - Thus Mad

1 answer 1

 function writetext(timeOneC = 150, word = '', pos = '', newWord = '', i = 0, g = 0, sub = ''){ sub = $('.topHomeBlock .slider .slick-active .subTitle'); pos = $('.topHomeBlock .slider .slick-active .title'); pos.addClass('vis'); word = pos.text(); pos.text(''); timeoutW(); function timeoutW() { if(click){ sub.removeClass('vis'); pos.text(word).removeClass('vis'); pos.removeClass('blick'); return false; } if (i < word.length){ setTimeout(function () { i++; newWord += word.charAt(i); pos.text(newWord); timeoutW(); }, timeOneC); } if(i === word.length){ pos.addClass('blick'); sub.addClass('vis'); setTimeout(function () { pos.removeClass('blick'); timeoutR(); }, timeOneC * 15); } } function timeoutR() { if(click){ sub.removeClass('vis'); pos.text(word).removeClass('vis'); pos.removeClass('blick'); return false; } if (g < word.length){ setTimeout(function () { g++; newWord = word.substring(g); pos.text(newWord); timeoutR(); }, timeOneC/3); } if(g === word.length && !click){ $('.topHomeBlock .slick-next').click(); sub.removeClass('vis'); pos.text(word).removeClass('vis'); writetext(150); } }

}