Javascriptの基礎的な質問です。

Question

現在、ボタンをクリックするとページを下に3秒毎に繰り返しスクロールする処理を実装しようとしています。

function startScroll()
{
   timer = setInterval(scrollDown(),3000);
}

function scrollDown()
{  
    var webview = document.getElementById('mainWebview');
    webview.executeJavaScript('window.scrollTo(0, 100000000)');
}

このように記述した場合、スクロールが1回のみ行われ処理が終わります。
なぜ1回のみしか処理が行われないのかがわからず試行錯誤して timer = setInterval(scrollDown(),3000); をfunctionの外に出してみました。

   timer = setInterval(scrollDown(),3000);

function scrollDown()
{  
    var webview = document.getElementById('mainWebview');
    webview.executeJavaScript('window.scrollTo(0, 100000000)');
}

すると、求めている処理（ボタンを押すとスクロールループ）とは違いますが、ページが開いてから繰り返しスクロールをループしてくれました。

このように、 timer = setInterval(scrollDown(),3000); をfunctionの中に入れてonclickイベントで呼び出した場合はなぜ1回のみの実行になり、functionの外に出した場合は正常にループしてくれるのか仕組みがわからず困っています。

わかりやすく説明して頂ける方はいらっしゃいませんでしょうか？

Comments

[think49]

重複質問です。https://teratail.com/questions/27751

[fama]

ご指摘ありがとうございます！修正致します！

Answer 1

質問の内容を変更する場合は質問の編集機能を使用してください。重複質問ととられてしまうのが普通です。

setInterval 関数が第一引数に取るのは Function オブジェクト、すなわち関数です。
下の (1) と (2) の記述の意味の違いに注意してください。
scrollDown 関数は値を返さないので setInterval には undefined が渡されます。

// (1) scrollDown 関数が渡される（3 秒間隔の実行が予約される）
setInterval(scrollDown, 3000);
// (2) scrollDown 関数の実行結果が渡される（副作用的にこの時点で一度だけ実行される）
setInterval(scrollDown(), 3000);

次に scrollDown の中身ですが、これは原点（画面の左上）を基準にして、(x: 0, y: 100000000) の位置にスクロールするものです。何秒経ってもこの位置は同じですがこれは意図通りですか？
たとえば 3 秒ごとに少しずつスクロールする場合は window.scrollBy を使用してください。

Comments

[fama]

chitokuさんいつもありがとうございます！
意味をとても正確に理解する事が出来ました！
今実際に実装してみたのですが、どうしても function　の中に入れてonclickイベントで呼び出した場合にはこの方法でも1回しか実行がされないです。
ボタンを押した場合にもちゃんとループさせるにはこのやり方ではできないのでしょうか？

[chitoku]

イベントで呼びされた場合か否かはこの場合は関係ないはずです。（JavaScript でイベントによる呼び出しが影響するのはウィンドウを開く処理だけです）

fama さんが書いたボタンに反応する処理が質問に掲載されていないのでなんとも言えないですが、呼び出す関数が startScroll になっているか確認してみてください。
（scrollDown 関数を呼び出してもタイマーの意味がないので）

[fama]

>イベントで呼びされた場合か否かはこの場合は関係ないはずです。

なるほどです。今もう一度やってみたのですが、やはりfunctionの中に入れた場合は処理が1回しか行われず、functionの外に出すと3秒毎にループしてくれます　汗

でもこれだとボタンを押した時の処理として出来ないのでとても困ってます　涙

[chitoku]

書き足した結果どのような処理になったか不透明なので質問欄かどこかに現在のコードを書いてもらえますか？（コメント欄は見にくいのでｗ）
onclick に追加する処理も書いてもらえれば原因が分かるかもしれません。

[fama]

なるほどです！teratailの使い方も勉強になります！
後、今回問題が解決致しました！
私の初歩的なミスでして、正常にコードを書くところまではできていたのですが、呼び出す処理をhtml側で間違えていました　涙

[chitoku]

解決してよかったですね。

Answer 2

setInterval(scrollDown(),3000);

より、

setInterval(
    function(){
        //処理
    }, 3000
);

の方が私は好きです。
ほかのメソッドからも呼び出すようなメソッドでなければ、この方が見やすいと思います。
変数のスコープとかもわかりやすいし。

Comments

[fama]

otftroughさんアドバイスありがとうございます！
たしかにこれは見やすいですね！ちょっと記述してみます★