javascriptの機能の遅延または設定のタイムアウトが機能しない

Question

javascriptで入力されたjquery関数をコード化しようとしています。私はほとんどthere.HEre私は単語を読み込んだ後遅延を追加する必要があります。 ）を読み込みます。どうすればいいの？試して遅れて、タイムアウトを設定しました。それは私のために働いていないか、または私は間違った位置に配置しています。どうすれば設定できますか？あなたは配列にして「非常に長い文字列を」追加する場合

var count = 0, 
 
    count2 = 0, 
 
    arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"], 
 
    dir = true; 
 
setInterval(function() { 
 
    var interval = setInterval(function() { 
 
    document.getElementById('p1').innerHTML = arr[count].substring(0, count2); 
 
    if (dir) { 
 
     count2++; 
 
     if (count2 >= arr[count].length) { 
 
     dir = false; 
 
     } 
 
    } else { 
 
     count2--; 
 
     if (count2 < 0) { 
 
     dir = true; 
 
     clearInterval(interval); 
 
     } 
 
    } 
 
    }, 100); 
 
    count++; 
 
    if (count == 6) count = 0; 
 
}, 2500);

<div style="width=100%"> 
 
    <span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span> 
 
</div>

Answer 1

あなたの実装では、問題が発生します。 私はあなたのコードを変更しました、それが助けてくれることを願っています。

var count = 0, 
 
    count2 = 0, 
 
    arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"], 
 
    dir = true; 
 
var p1 = document.getElementById("p1"); 
 

 
// Turning the intervals to on or off. 
 
var onOff = function(bool, func, time) { 
 
    if (bool === true) { 
 
    interval = setInterval(func, time); 
 
    } else { 
 
    clearInterval(interval); 
 
    } 
 
}; 
 

 
var eraseCharacters = function() { 
 
    // How long we want to wait before typing. 
 
    var wait = 1000; 
 

 
    // How fast we want to erase. 
 
    var erasingSpeed = 100; 
 

 
    var erase = function() { 
 
    p1.innerHTML = arr[count].substring(0, count2); 
 
    count2--; 
 
    if (count2 < 0) { 
 
     dir = true; 
 

 
     // Stop erasing. 
 
     onOff(false); 
 

 
     count++; 
 
     if (count === 6) { 
 
     count = 0; 
 
     } 
 

 
     // Start typing. 
 
     setTimeout(startTyping, wait); 
 
    } 
 
    }; 
 

 
    // Start erasing. 
 
    onOff(true, erase, erasingSpeed); 
 
}; 
 

 
var startTyping = function() { 
 
    // How long we want to wait before erasing. 
 
    var wait = 4000; 
 

 
    // How fast we want to type. 
 
    var typingSpeed = 100; 
 

 
    var type = function() { 
 
    p1.innerHTML = arr[count].substring(0, count2); 
 
    if (dir) { 
 
     count2++; 
 
     if (count2 > arr[count].length) { 
 
     dir = false; 
 

 
     // Stop typing. 
 
     onOff(false); 
 

 
     // Start erasing. 
 
     setTimeout(eraseCharacters, wait); 
 
     } 
 
    } 
 
    }; 
 

 
    // Start typing. 
 
    onOff(true, type, typingSpeed); 
 
}; 
 

 
// Start typing after 2 seconds. 
 
setTimeout(startTyping, 2000);

<div style="width=100%"> 
 
<!-- Maybe it should be class. --> 
 
    <span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span> 
 
</div>