Chapter12 の「SVGやcanvas要素を取り扱う」はいまいま実用ではなさそうだったので読んで終わりにします。
第一引数には関数を、第二引数にミリ秒を数値で指定します。
setTimeout()
メソッドとfunction
を使うとthis
のスコープが変わる場合もあるため、プロパティーの参照がうまくいかないこともあるでしょう。this
のスコープがはずれないアロー関数と組み合わせて使うといいでしょう。
setTimeout(() => { // 任意の処理 console.log(this); // このオブジェクト }, 1000);
キャンセルしたいタイミングで
clearTimeout()
メソッドにタイマーを渡すことで、setTimeout()
メソッドの呼び出しを解除できます。
const item220_timerId = setTimeout(item220_timer, 1000); // 1000ミリ秒後に実行 function item220_timer() { // 任意の処理 console.log('clearTimeout()で解除するため出力されません'); } clearTimeout(item220_timerId); // 解除
スコープが変わるため、アロー関数と組み合わせて使うといいでしょう。
setInterval(() => { // 任意の処理 console.log(`1000ミリ秒毎に出力されます`); }, 1000);
setInterval()
メソッドの戻り値は数値となります。この数値を変数に保存しておき、キャンセルしたいタイミングでclearInterval()
メソッドにその数値を渡します。
const item222_interlvalID = setInterval(item222_timer, 1000); // 1000ミリ秒ごとに実行 function item222_timer() { // 任意の処理 console.log('clearInterval()で解除するため出力されません'); } clearInterval(item222_interlvalID); // 解除
Promise
オブジェクトは非同期処理を扱える機能です。Promise
を使うと非同期処理を扱いやすくなるため、コードの可読性が向上します。
Promise
のコンストラクター引数には非同期処理を行う関数を指定します。この関数のなかでは、非同期処理の完了としてのresolve()
メソッドが呼ばれるのを待機します。Promise
インスタンスのthen()
メソッドを使うと、resolve()
メソッドが実行された後に続けたい処理を記述できます。
const item223_promise = new Promise((resolve) => { setTimeout(() => { // resolve()を呼び出すとPrimiseの処理が完了 resolve('orange'); }, 1000); }); // then() メソッドで続く処理を記述できる item223_promise.then((value) => { console.log(value); // 一秒後に実行される 結果: 'orange' });
Promise
で失敗時の処理を行いたいときは、コンストラクターの引数にreject
を含む関数を指定します。reject
は処理が失敗したことを示す処理を割り当てます。reject
が実行された場合には、catch()
メソッドが呼ばれます。
let item224_flag01 = false; const item224_promise01 = new Promise((resolve, reject) => { if (item224_flag01 === true) { resolve('orange'); } else { reject('apple'); } }); item224_promise01.then((value) => { console.log(value); // 結果: 'orange' }); item224_promise01.catch((value) => { console.log(value); // 結果: 'apple' // item224_flag01 が false なのでこちらが出力される });
// メソッドチェーンとして記述できる let item224_flag02 = true; new Promise((resolve, reject) => { if (item224_flag02 === true) { resolve('orange'); } else { reject('apple'); } }) .then((value) => { console.log(value); // 結果: 'orange' // item224_flag02 が true なのでこちらが出力される }) .catch((value) => { console.log(value); // 結果: 'apple' });
setTimeout()
や setInterval()
はいいにしてもほかがむずかしいpromise
/ resolve
/ then
/ reject
/ catch
など用語は見たことあっても今までコピペだったので実際に手を動かして使うのははじめてなのでさぐりさぐりやってます。
はスキップ