JS クロージャとタイマー

今回は JS クロージャーと タイマー について説明します。JS クロージャーとタイマーを使用する際の 注意事項 について、実際のケースを見てみましょう。

クロージャとは何ですか? 何をするものですか?
クロージャは、他の関数の内部変数を読み取ることができる関数です。
機能: 1. 関数内の変数を読み取ることができます。 2. これらの変数の値をメモリに保持します。

setTimeout 0の役割は何ですか
JSの実行はシングルスレッドに基づいています。これは、コードの一部が実行されると、他のコードがキューに入って待機し、スレッドが解放されると後続のコードが実行されることを意味します。コードに setTimeout が設定されている場合、ブラウザは適切な時間にコードをタスク キューに挿入します。この時間が 0 に設定されている場合、コードはすぐにキューに挿入されますが、実行されません。前のコードが完了するまで待つ必要があります (実際には、16 ミリ秒か 4 ミリ秒かはブラウザによって異なります)。したがって、setTimeout が実行時間を保証するものではありません。時間内に実行されるかどうかは、JavaScript スレッドが混雑しているかアイドル状態であるかによって決まります。

コード

以下のコードはどれくらいの出力を出力しますか? fnArr[i]() が i を出力するようにコードを変更します。 2 つ以上のメソッドを使用する

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

setTimeout を使用して setInterval の関数をシミュレートする関数を作成します
コード:

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

setTimeout の最小時間粒度を計算する関数を作成します
コード:

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( を実行する前にすべてのコードが実行されるまで待つ必要があります。 function(){a = 2;console.log(a);}, 0);。

次のコードの出力結果は何ですか?

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

は、すべてのコードが実行された後に実行されるため、結果が出力されません。 `flag 初期値は true なので、while は永久にループし、console.log(flag) にはアクセスできません。ただし、一部のブラウザのループ防止機能により、出力が true になる場合もあります。

次のコードの出力は何でしょうか? lateer: 0、layer: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 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

簡単な CSS3 クリック応答アニメーションのケース

Python を使用して画像の類似性を判断する方法

以上がJS クロージャとタイマーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。