JS 클로저 및 타이머

이번에는 JS 클로저와 타이머를 가져왔습니다. JS 클로저와 타이머를 사용할 때 주의사항은 무엇인가요?

클로저란 무엇인가요?
클로저는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다.
함수: 1. 함수 내부의 변수를 읽을 수 있습니다. 2. 이 변수의 값을 메모리에 보관합니다.

setTimeout 0의 역할은 무엇인가요?
JS 실행은 단일 스레드를 기반으로 합니다. 즉, 코드 조각이 실행될 때 다른 코드가 대기하기 위해 대기열에 들어가고 스레드가 해제되면 후속 코드가 실행됩니다. . 코드에 setTimeout을 설정하면 브라우저는 적절한 시간에 작업 큐에 코드를 삽입합니다. 이 시간을 0으로 설정하면 즉시 큐에 삽입되지만 실행되지는 않는다는 의미입니다. 이전 코드가 실행될 때까지 기다려야 합니다. 실제로는 브라우저에 따라 16ms 또는 4ms 지연이 있습니다. 따라서 setTimeout은 실행 시간을 보장하지 않습니다. 시간 내에 실행되는지 여부는 JavaScript 스레드가 혼잡한지 또는 유휴 상태인지에 따라 다릅니다.

Code

아래 코드는 얼마나 출력되나요? fnArr[i]()가 i를 출력하도록 코드를 수정합니다. 두 가지 이상의 방법을 사용하세요

var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] =  function(){
return i;
};
}
console.log( fnArr3 );  //

코드:
방법 1:

var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] =  (function(){
var index = i;
var fn = function(){
return index
}
return fn
}());
}
console.log( fnArr3 );  //

방법 2:

var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(n){
fnArr[i] = function(){
return n;
}
})(i)
};
console.log( fnArr3 )

클로저를 사용하여 자동차 객체를 캡슐화하면 자동차 상태

var Car = //todo;
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

코드를 얻을 수 있습니다.

var Car = (function(){
var speed;
function setSpeed(n){
speed = n
}
function getSpeed(){
return console.log(speed);
}
function accelerate(){
speed +=10
return speed;
}
function decelerate(){
speed -=10
return speed;
}
function getStatus(){
return console.log(speed===0?'stop':'running');
}
return {
setSpeed:setSpeed,
getSpeed:getSpeed,
accelerate:accelerate,
decelerate:decelerate,
getStatus:getStatus,
}
}());
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
Car.speed();  //error

setInterval의 함수를 시뮬레이션하기 위해 setTimeout을 사용하는 함수를 작성하세요
Code:

var i=0;
function intv(){
setTimeout(function(){
console.log(i++);
intv();
},1000);
}
intv();

setTimeout
Code의 최소 시간 단위를 계산하는 함수를 작성하세요.

function getmin(){
var i = 0;
var start = Date.now();
var clock = setTimeout(function(){
i++;
if(i === 1000){
clearTimeout(clock);
var end = Date.now();
console.log((end-start)/i)
}
clock = setTimeout(arguments.callee,0)
},0)
}
getmin()

다음 코드의 출력 결과는 무엇인가요? 이유는 무엇입니까?

var a = 1;
setTimeout(function(){
a = 2;
console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);

이 코드의 출력 결과는 1;3;2입니다. 코드에 setTimeout이 설정되어 있기 때문입니다. 이 시간이 다음으로 설정되면 브라우저는 적절한 시간에 작업 대기열에 코드를 삽입합니다. 0이면 즉시 큐에 삽입된다는 뜻이지만 바로 실행되지는 않습니다. 여전히 이전 코드가 실행될 때까지 기다려야 하므로 setTimeout(을 실행하기 전에 모든 코드가 실행될 때까지 기다려야 합니다. 함수(){a = 2;console.log(a);}, 0);.

다음 코드의 출력 결과는 무엇입니까?

var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);

가 결과를 출력하지 않는 이유는 setTimeout(function(){flag = false;},0)이 모든 코드가 실행된 후에 실행되기 때문입니다. `flag 초기값은 true이므로 while은 영원히 반복되며 console.log(flag)에는 액세스되지 않습니다. 그러나 일부 브라우저의 루프 보호 기능으로 인해 출력이 true일 수도 있습니다``.

다음 코드의 출력은 무엇입니까? 출력 방법 지연기: 0, 지연기:1... (클로저를 사용하여 구현)

for(var i=0;i<5;i++){
setTimeout(function(){
console.log(&#39;delayer:&#39; + i );
}, 0);
console.log(i);
}

코드:

for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(&#39;delayer:&#39; + i );
}, 0);
})(i)
console.log(i);
}

두뇌를 태우는 질문

다음 console.log의 결과는 무엇입니까? 왜?

function fn(a,b) {
console.log(b);
return {
fn:function(c){
return fn(c,a);
}
};
}
var a = fn(0);
a.fn(1);
a.fn(2);
a.fn(3);
var b = fn(0).fn(1).fn(2).fn(3);
var c = fn(0).fn(1);
c.fn(2);
c.fn(3);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

간단한 CSS3 클릭 응답 애니메이션 사례

파이썬을 사용하여 이미지 유사성을 확인하는 방법

위 내용은 JS 클로저 및 타이머의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!