[jQuery] setInterval, clearInterval

window.setInterval(동작, 시간) 메소드 사용하여
Java, HTML, CSS, JavaScript, jQuery 문자열을 배열에 저장하고, 1초마다 순차적으로 #myDiv 위치에 출력(화면표시)

    $(document).ready(function(){
        let arr = ["Java", "HTML", "CSS", "JavaScript", "jQuery"];
        let index = 0;
        let timer;
        function play(){
            timer = setInterval(function(){
            console.log(index + " : " + arr[index]);
            $("#myDiv").html(arr[index]);
            index++;
            
            if(index >= arr.length){
                index  = 0;
            };
               
            },1000) 
        };

        $("#startJQ").click(function(){
            console.log("재생");
            play();
        });
        $("#stopJQ").click(function(){
            console.log("중지"); 
            clearInterval(timer);
        });
    });

setInterval 중복 실행 제거

위 코드에서 재생을 두 번 누르고 중지를 눌렀을 때 중지가 되지 않고 계속 재생되는 문제가 발생함. 이를 해결하기 위해서 이 함수 안에 clearInterval(timer);를 한 번 넣어주었음.

function play(){
            clearInterval(timer);
            timer = setInterval(function(){
            console.log(index + " : " + arr[index]);
            $("#myDiv").html(arr[index]);
            index++;
            
            if(index >= arr.length){
                index  = 0;
            };
            },1000); 
        };