【超解説】JavaScript setIntervalでパラメータを渡す3つの方法と注意点

2024-04-02

JavaScriptのsetInterval関数でパラメータを渡す方法

匿名関数を使う

const intervalId = setInterval(function() {
  // 処理
}, 1000);

// パラメータを渡す
function doSomething(param) {
  console.log(param);
}

clearInterval(intervalId);

この方法では、setInterval関数の第一引数に匿名関数を渡し、その匿名関数内でパラメータを受け取ります。

const intervalId = setInterval(() => {
  // 処理
}, 1000);

// パラメータを渡す
function doSomething(param) {
  console.log(param);
}

clearInterval(intervalId);

アロー関数を使う方法も匿名関数と似ていますが、より簡潔に書くことができます。

bindを使う

const intervalId = setInterval(doSomething.bind(null, param), 1000);

// パラメータを渡す
function doSomething(param) {
  console.log(param);
}

clearInterval(intervalId);

bindを使う方法は、関数オブジェクトにパラメータをバインドして、新しい関数を生成します。

上記3つの方法いずれでも、setInterval関数にパラメータを渡すことができます。それぞれの方法の特徴を理解し、状況に合わせて使い分けてください。

匿名関数

const intervalId = setInterval(function(param1, param2) {
  // 処理
  console.log(`param1: ${param1}, param2: ${param2}`);
}, 1000, 'param1', 'param2');

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

アロー関数

const intervalId = setInterval(() => {
  // 処理
  console.log(`param1: ${param1}, param2: ${param2}`);
}, 1000, 'param1', 'param2');

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

bind

const doSomething = (param1, param2) => {
  // 処理
  console.log(`param1: ${param1}, param2: ${param2}`);
};

const intervalId = setInterval(doSomething.bind(null, 'param1', 'param2'), 1000);

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

実行結果

param1: param1, param2: param2
param1: param1, param2: param2
param1: param1, param2: param2

上記のように、setInterval関数にパラメータを渡すことで、より柔軟な処理を行うことができます。

setInterval関数にパラメータを渡すその他の方法

関数オブジェクトのプロパティとしてパラメータを渡す

const doSomething = {
  fn: function() {
    // 処理
    console.log(this.param1, this.param2);
  },
  param1: 'param1',
  param2: 'param2'
};

const intervalId = setInterval(doSomething.fn, 1000);

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

IIFEを使う

const intervalId = setInterval((function(param1, param2) {
  // 処理
  console.log(param1, param2);
})(param1, param2), 1000);

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

この方法では、IIFE(Immediately Invoked Function Expression)を使って、パラメータを含む匿名関数を即座に実行します。

第三引数としてオブジェクトを渡す

const intervalId = setInterval(() => {
  // 処理
  console.log(param1, param2);
}, 1000, { param1, param2 });

// 3秒後に停止
setTimeout(() => {
  clearInterval(intervalId);
}, 3000);

この方法では、setInterval関数の第三引数としてオブジェクトを渡し、そのオブジェクトのプロパティとしてパラメータを渡します。

注意点