> For the complete documentation index, see [llms.txt](https://heunnajo.gitbook.io/zerocho-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://heunnajo.gitbook.io/zerocho-javascript/settimeout-cleartimeout.md).

# setTimeout, clearTimeout

setTimeout : n초 뒤 setTimeout 내부의 interval이 다시 동작하게 할 때 사용한다.

clearTimeout : setInterval을 멈춘다.

```javascript
//0.1초마다 백그라운드 이미지를 바꿔준다.
var 이미지좌표 = 0;
//자료구조의 일종으로 자바스크립트 객체는 딕셔너리 자료구조 역할을 할 수 있다. 1:1 매칭을 표현한다.
var 딕셔너리 = {
    //1:다를 매칭할 수도 있다. 예를 들어 한국어를 다른 언어들로 표현하고 싶을 때
    //바위 : ['0','바위','rock'],
    // 바위 : { 객체로 만들 수도 있다.
    //     한국어 : '바위',
    //     영어 : 'rock',
    //     값 : '0',
    // }
    바위 : '0',
    가위 : '-142px',
    보 : '-284px',
}
/*값이 전환이 안 되기 때문에 같은 딕셔너리를 2개 만들고 값이 바뀔 때마다 수동으로 바꿔줘야한다.
var 딕셔너리2 = {
    '0' : '바위',
    '-142px' : '가위',
    '-284px' : '보',
}*/
//Object.entries(객체)로 객체를 2차원 배열로 바꿀 수 있다.
//console.log(Object.entries(딕셔너리));//[ "키": "값"],[ "키": "값"],[ "키": "값"] 각각 [0][1][2] 로 나온다.
function 컴퓨터의선택(이미지좌표) {
    return Object.entries(딕셔너리).find(function(v){//배열.find는 반복문이지만 원하는 것을 찾으면 멈춘다.(return이 true). 1차원 배열에서 indexOf를 썼다면 2차원배열에서는 find와findIndex를 잘 쓴다.
    //console.log(v);다쓴 콘솔로그는 다 지우고.코드 깔끔하게.
    return v[0] === '이미지좌표';//0번째가 이미지좌표인 애를 찾는다.반복되는 변수와 그것을 일반화하여 매개변수로.
    })[0];
}


var 인터벌;
function 인터벌메이커() {
    인터벌 = setInterval(function() {//setInterval과 이벤트리스너 콜백함수와 같은 비동기는 코드 마지막에 있다고 생각
    if(이미지좌표 === 딕셔너리.바위) {
        이미지좌표 = 딕셔너리.가위;
    } else if (이미지좌표 === 딕셔너리.가위) {
        이미지좌표 = 딕셔너리.보;
    } else {
        이미지좌표 = 딕셔너리.바위;
    }
    document.querySelector('#computer').style.background = 'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + 이미지좌표 + ' 0 ';
},100);//0.1초마다 계속 실행한다.
}
인터벌 = 인터벌메이커();
//가위 바위 보 다 선택할 수 있다.querySelectorAll을 유사배열처럼 사용하여 반복문을 사용할 수 있다.
// for(var i = 0; i < document.querySelectorAll('.btn');i += 1) {
//     document.querySelectorAll('.btn')[i].addEventListener('click',function(){
//     console.log(this.textContent);
//     });
// }
//위처럼 반복문을 사용할 수도 있지만 querySelectorAlldms forEach를 지원한다.
document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function() {//가위 0 바위 -1 보 1 숫자로 만들어서 규칙을 만들어내면 코드가 짧아진다.
        clearInterval(인터벌);//setInterval을 멈춘다.
        setTimeout(function() {
            인터벌메이커();
        },1000);
        var 나의선택 = this.textContent;
        console.log(나의선택,컴퓨터의선택(이미지좌표));
        //가위바위보 비교
        if(나의선택 === '가위' {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('비겼습니다');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('졌습니다ㅠㅠ');
            } else {
                console.log('이겼습니다!!');
            }
        } else if(나의선택 === '바위') {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('이겼습니다!!');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('비겼습니다');
            } else {
                console.log('졌습니다ㅠㅠ');
            }

        } else if(나의선택 === '보') {
            if(컴퓨터의선택(이미지좌표) === '가위') {
                console.log('졌습니다ㅠㅠ');
            } else if(컴퓨터의선택(이미지좌표) === '바위') {
                console.log('이겼습니다');
            } else {
                console.log('비겼습니다!!');
            }
        }
    });
})
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://heunnajo.gitbook.io/zerocho-javascript/settimeout-cleartimeout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.