[jQuery]타이밍함수(setTimeout, setInterval)

*타이밍 함수

1. setTimeout (실행함수, 시간)

=> 일정시간 이후에 한 번만 실행

setTimeout(function(){
    console.log("3초뒤에 실행!");
}, 3000);

2. setInterval (실행함수, 시간)

=> 지정한 시간마다 계속 실행

setInterval(function(){
    document.write("1초마다 실행");
}, 1000)

*1초마다 element의 배경색 바꾸기

script

            $('.box').css({
                width: 300,
                height: 300,
                backgroundColor: "salmon"
            })


            var num = 0;
            setInterval(function(){
                if(num === 0){
                    $('.box').css({
                        backgroundColor: "royalblue"
                    })
                    num++;
                } else if(num === 1){
                    $('.box').css({
                        backgroundColor: "lightgray"
                    })
                    num = 0;
                }
                console.log('1초마다 실행')
            }, 1000);

=> setInterval을 사용하여 1초(1000)마다 num을 0또는 1로 나눠지는 조건을 걸어
box에 backgroundColor를 바꿔주었다.

*2초마다 자동으로 슬라이드 넘기기

지난 번에 했던 arrow 클릭 시 움직이던 slide를 자동으로 움직일 수 있도록 setInterval을 사용해보았다.

script

      $(document).ready(function () {

        var num = 0;

        setInterval(function () {
          num++;
          if (num > 2) {
            num = 0;
          }

          $(".img_wrap")
            .stop()
            .animate({
              left: -600 * num,
            });
        }, 2000);

      });

=> setInterval을 사용하여 지난 번 slide 제작 때 사용했던 코드의 클릭이벤트 내부 내용글 그대로 붙여넣었다.
클릭을 실행할 때에 발동되던 이벤트를 2초마다 실행되게 한 것이기 때문에 문제없이 실행되는 것을 확인할 수 있다.