はじめに

JavaScript で setTimeout, setInterval, addEventListener のコールバック関数に引数を渡す方法をまとめた。

TL;DR

  • setTimeout, setInterval には bind(<this>, <args>)
    • コールバック関数内では、関数定義の仮引数でアクセス
  • addEventListener には第二引数を Object 型で渡す
    • コールバック関数内では this.args で引数にアクセス

目的・やったこと

setTimeout, setInterval, addEventListener のコールバック関数に引数を渡したかったので調べてまとめた。

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 目的・やったこと
  4. 環境・条件
  5. 詳細
    1. setTimeout, setInterval
    2. addEventListener
  6. まとめ
  7. 参考文献

環境・条件

1
Google Chrome バージョン: 76.0.3809.100（Official Build） （64 ビット）

詳細

setTimeout, setInterval

bind で束縛。第一引数は this に対応するパラメータなので、使わない場合は null で良い。

1
2
3
4
5
6
7
setTimeout(function(your, args) {
  console.log({
    your: your,
    args: args
  })
}.bind(null, "my", "arguments"), 1000);
// => { your: 'my', args: 'arguments' } と出力される

this に Object 型の変数を渡して、こんな風に使っても良い。

1
2
3
4
5
6
7
8
9
10
args = {foo: 1, bar: ["a", "b", "c"], baz: {hoge: "fuga"}};
setTimeout(function(your, args) {
  console.log({
    foo: this.foo,
    bar: this.bar,
    baz: this.baz,
    hoge: this.baz.hoge,
  })
}.bind(args), 1000);
// => { foo: 1, bar: [ 'a', 'b', 'c' ], baz: { hoge: 'fuga' }, hoge: 'fuga' }

addEventListener

第二引数を Object 型にし、handleEvent にコールバック関数を渡しつつ、好きな名前で引数を渡せば良い。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const handler = function(event) {
  console.log({
    event: event,
    foo: this.foo,
    bar: this.bar,
    hoge: this.baz.hoge
  });
}
document.getElementById("target").addEventListener("click", {
  handleEvent: handler,
  foo: 1,
  bar: ["a", "b", "c"],
  baz: {hoge: "fuga"}
});

こんな結果になる。

js_addEventListener

Object 内で capture: true とすれば、useCapture = true としたのと同じになる(はず)。

あるいは setTimeout, setInterval と同様に bind でも可。

1
2
3
document.addEventListener('click', function (flg, count) {
  console.log({flg, count})
}.bind(null, true, 5));

クリックすると↓がコンソール上に表示される。

1
{ flg: true, count: 5 }

まとめ

  • setTimeout, setInterval には bind(<this>, <args>)
    • コールバック関数内では、関数定義の仮引数でアクセス
  • addEventListener には第二引数を Object 型で渡す
    • コールバック関数内では this.args で引数にアクセス

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list