javascript 함수가 지연되거나 작동하지 않음 시간이 초과되었습니다.

Question

javascript에서 입력 된 jquery functinality를 코딩하려고합니다. 나는 거의 there.HEre입니다. 단어를로드 한 후 지연을 추가해야합니다. 몇 초 (예 : 4 초)) 각 단어가로드 된 후. 내가 어떻게 해. 시도 지연 및 시간 초과 설정. 그것은 나를 위해 작동하지 않거나 잘못된 위치에 배치됩니다. 어떻게 설정할 수 있습니까? 당신이 배열에서 "매우 긴 문자열"을 추가하면

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>