ワイヤード・パンチ

JavascriptのsetIntervalが効かないときの対処法。

仕事のうえで、一定間隔でとある処理をするサイトを作らないといけないことがありました。

一定間隔で処理を行うにはsetIntervalというものを使えばいいはずなのですが、なぜかうまく動作しません。

その原因について。

広告

今回のコード。

jQuery(function($) {
	var test;
	test = function() {
		console.log("ok");
	};
	setInterval("test", 1000);
});

今回のコードは、ただ単純に1000ミリ秒ごとに、つまり1秒ごとにコンソールに「ok」と出力するだけのコードです。

「ok」と出力するだけの関数を、1秒ごとに呼び出したかったのですが…。

Uncaught ReferenceError: test is not defined
at <anonymous>:1:1

Chromeの検証ツールを開いて、出力させていた結果がこれ。

setIntervalを実行したタイミングで、エラーとなっていました。

内容はおそらく、testという関数が定義されていないということ。

しかし、なぜそう言われてしまうのでしょうか。

setIntervalより先に、関数は定義されているのに…。

javascriptは処理の名前が大文字小文字混じりという厄介なものですが、それを間違っているというわけでもなく…。

対処法。

jQuery(function($) {
	var test;
	test = function() {
		console.log("ok");
	};
	setInterval(test(), 1000);
});

こちらのコードなら、正常に実行できました。

setIntervalの1つ目の引数には、関数の名前を文字列型として書くのではなく、処理内容自体を書くのが正解でした。

今回の場合は、test()なので、testという関数を呼び出す処理になりますね。

関数を呼び出すのではなく、引数に無名関数を直接書いてもOKです。

ただ、最初のコードはとあるサイトに載っていたコードを参考にしながら書いたもの。

なぜそのサイトでは、文字列型にしておきながら正常に動作したことになっているのか…。

その参考サイトも一年前のものなので、そこまで古いわけでもなく。

単純に書き間違いなのか、あるいは一年のうちに仕様が変わったのか、それともjQueryを使っているからなのか…?

とりあえず、ミスの原因はほんの些細なものでしたが、これで解決。