에서는 setTimeout과 setInterval을 차이

에서는 setTimeout과 setInterval을 차이

두 가지 방법이 있지만, 다른 실행 시간으로, 타이밍 네이티브 JS 있습니다.

• 에서는 setTimeout () 메소드는 밀리 지정된 횟수 계산식 또는 함수 호출에 사용된다. 단순히 당신이 작업을 수행해야을 통해 몇 초 후에, 당신이 저를 건네 것을 말해야한다. (한 번 실행)

  setTimeout(function(){ alert("Hello"); }, 3000);

• 위해 clearInterval () 메소드를 호출 할 때까지 함수 또는 연산 식을 밀리 초 단위로 지정된 기간에 따라서하여 setInterval ()가 호출되거나 윈도우가 폐쇄된다. 그것은 단순히 몇 초마다, 무제한 실행하면 실행된다.

<script>
    var w, h;
    var canvas = document.querySelector('canvas');
    ~~function setSize() {
        window.onresize = arguments.callee;
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }();
    var canCon = canvas.getContext('2d');
    var x = randomNum(0,w);
    var y = 100;
    setInterval(function(){
        canCon.fillStyle = randomColor();
        canCon.arc(x,y++,20,0,2*Math.PI)
        canCon.fill();
    },1000/60);

    // 随机数
    function randomNum(min,max){
        return Math.floor(Math.random() * (max - min) + min);
    }
    // 随机颜色
    function randomColor(){
        var r,g,b,a;
        r = randomNum(0,255);
        g = randomNum(0,255);
        b = randomNum(0,255);
        a = Math.random();
        return `rgba(${r},${g},${b},${a})`;
    }
</script>

이 시점에서 스크롤 막대가 나타납니다 점멸.

그러나 나는 setInterval을 빨리 문제를 찾을 수 ...

그는 모든 종류의 정보를 확인하기 시작했다, 그래서 조심 조사 후, 나는 내 자신의 코드의 문제를 판결했다. 이 setInterval을 자신의 문제를 알고 마지막이다 (). setInterval을의 사용이 빨라 문제가 나타납니다 이유를 다음의 인용 갱스 통로를 설명합니다.

타이머 프로그램이 실행되는이 될 것을이 수단! 철 규칙은 함수가 스택을 만들 시작하면 왜? 이렇게! 수행 할 필요가 없습니다 그래서 "자바 스크립트는 단일 스레드 환경에서 실행 스택 프레임이의 구현 스택 프레임 3 초,이 세 가지 초가있는 가정, 시간이 걸립니다, 자바 스크립트를 단일 스레드 기능 3 초 내에 일심 노력 (이 스택 프레임 없애 갈 것을 보장합니다 기능). 시간의 함수를 실행할 때 그래서이 기능 때문에, 실행에 그의 능력의 타이머 종료를 실행하지 않는 1 초 간격의 간격보다 큰하지만, 2 초 마무리로 프로그램은 당신에게 다음뿐만 아니라 수행하지 않은 솔직히 기능을 실행하기 위해 기다릴 필요가! "

문제의 원인을 알고, 우리는이 문제를 해결하는 방법에 대해 알아 보겠습니다.

사용의 setTimeout setInterval을 루프는 신속하고 빠르게 문제를 해결하기 위해

var i=0;
    function show() {
        console.log(i);
        i++;
        if(i<5){
            setTimeout(show,1000);
        }
    }
    show();