はじめに

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

TL;DR

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

目的・やったこと

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

目次

  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 で引数にアクセス

参考文献

関連記事