実現したいこと

単純なスライドショーを作成しています。
setIntervalを使用し3秒おきに最初の画像をフェードアウトし、次の画像をフェードインさせるのを繰り返すという挙動を目指します。

理解できない箇所

setInterval内に指定する関数の指定の方法が「()」がない記載方法が書いてあり、関数の発火をするときになぜ「()」がないのかが理解できませんでした。
関数を発火する際に「()」のなしはどのような場面で使うのか、「()」ありと何が違うのかを教えていただけると助かります。。！

//〇正しく動作 関数の後に()がない
setInterval(switchImg, interval);

//〇正しく動作 setIntervalの後にアロー関数なりfunctionなりを入れたときは()を入れると正しく動作
setInterval(() => {
　switchImg();
 }, interval);

    //〇 正しく動作 そもそも関数使ってないので動く
setInterval(() => {
　console.log('switchImg');
　var imgs = container.find('img');
　var first = imgs.eq(0);
　var second = imgs.eq(1);
　first.appendTo(container).fadeOut();
　second.fadeIn();
　}, interval);

//× functionがないと()を入れると動作しない
setInterval(switchImg(), interval);

該当のソースコード

//3秒置きに画像が変わるスライドショーを想定
$(function () {

	const interval = 3000;

	$('.slideshow').each(function(){
    const container = $(this);

    //スライドショーの関数
    function switchImg() {
      console.log('switchImg');
			var imgs = container.find('img');
			var first = imgs.eq(0);//最初の画像を取得
			var second = imgs.eq(1);//次の画像を取得
			first.appendTo(container).fadeOut();
      second.fadeIn();
    }

    /*★ここ以降のsetIntervalの記載の違いで挙動が変わる★ */

    //〇 正しく動作
    // setInterval(switchImg, interval);

    //〇 正しく動作
    // setInterval(() => {
    //   switchImg();
    // }, interval);

    //〇 正しく動作
    // setInterval(() => {
    //   console.log('switchImg');
		// 	var imgs = container.find('img');
		// 	var first = imgs.eq(0);
		// 	var second = imgs.eq(1);
		// 	first.appendTo(container).fadeOut();
    //   second.fadeIn();
    // }, interval);


    //× 関数が動かず変化なし。 console.log('switchImg');も出ない
    // setInterval(switchImg(), interval);


	});
});

退会済みユーザー

2022/09/14 06:08 編集

setInterval() の第 1 引数は「関数」（＝関数の名前＝関数のアドレス）でなければなりません。 setInterval() https://developer.mozilla.org/ja/docs/Web/API/setInterval switchImg は関数、() => {switchImg();} も関数ですが、() をつけて switchImq() とすると関数ではなくてその関数の実行を表すからでしょう。

m.ts10806

2022/09/14 06:23 編集

本質的にはjQuery無関係と思います（タイトル、質問タグ）

Cocode

2022/09/24 14:56 編集

同意！これはjQueryの質問ではなくJavaScriptの質問なので、タイトルとタグからjQueryを削除したほうが、今後の方のために親切だと思います！タイトルは『コールバック関数とは？（）を書くときと書かないときの違い』などいかがでしょうか。

行動規範の内容に同意します

回答3件

setInterval(switchImg(), interval);

コールバックは普通関数名を指定します

setInterval(switchImg, interval);

sample1

javascript
1let count=1;
2const func=()=>{
3  console.log(count++);
4}
5setInterval(func,1000);

sample2

実行形式で処理する場合は関数名をreturnします

javascript
1let count=1;
2const func=()=>{
3  console.log(count++);
4  return func;
5}
6setInterval(func(),1000);

投稿2022/09/14 06:03

編集2022/09/14 06:06

yambejp

総合スコア114829

結論

先に結論から言うと、setInterval()の第一引数には、

関数

しか入れられないからです。何を当たり前のことを！と思われるかもしれませんが、以下で詳しく解説します。

myFunc() と myFuncの違い

以下のような関数があったとします。
この関数を2種類の方法で変数に格納します。
そして、それぞれコンソールで呼び出して、戻り値を確認してみましょう。
デモページを用意しましたので、よければ併せてご覧ください。

デモ on JSFiddle

javascript
1function greet() {
2	return 'Hello World!';
3}
4
5let greetStr = greet();
6let greetFunc = greet;
7
8console.log(greetStr);
9console.log(greetFunc);

そうするとそれぞれ以下のような結果が返ってきます。

javascript
1// greet()を格納した変数の結果
2"Hello World!"
3
4// greetを格納した変数の結果
5function greet() {
6    return 'Hello World!';
7}

つまり、どこかに格納されて呼び出されたときの関数が返すものは

代入した関数	戻り値	例
`greet()`	実行して戻された値	`'Hello World!'`
`greet`	関数そのもの	`function greet() { ... }`

よく考えると当たり前のことなんですよね。だってmyFunc()って、「関数を実行せよ！」 っていう命令文じゃないですか。
そりゃあ、書かれた時点で即実行して値返しちゃいますよ。

setInterval()が引数に求めるものは？

以上を踏まえてsetInterval()について振り返ってみます。
第一引数に求められているのは、関数（これをコールバック関数といいます）でしたね。

上記で、変数に関数を代入したときの挙動の違いをみました通り、関数が返されるのはgreetの書き方でしたね。
greet()と書いちゃうと、実行結果の値そのものがsetInterval()の第一引数に入ってしまうことになるので、きちんと動作しなくなります。
setIntervalからしたら 「いやぁ、値だけもらっても何したらいいかわかんねーよ」 って感じですよね。

そしてさらにsetIntervalからしたら、ちゃんと処理内容を指示してくれるなら関数名であろうがコード直書き（() => {...}）であろうが、どちらでもいいわけです。
そしてここは基本の内容ですが、関数の中で関数を実行する時はmyFunc();と書きますよね。
ですので、まぁこうなるわけです↓

javascript
1setInterval(関数名, 数値);
2// 例 setInterval(greet, 1000);
3
4setInterval(コードそのもの, 数値);
5// 例 setInterval(() => {
6//     greet();
7// }, 1000);