setInterval関数でパラメーターを渡す


320

usingを使用して呼び出される関数にパラメーターを渡す方法を教えてくださいsetInterval

私の例setInterval(funca(10,3), 500);は間違っています。


2
構文:.setInterval(func, delay[, param1, param2, ...]);
O-9 '9

回答:


543

実際の関数がすぐに実行されないように、無名関数を作成する必要があります。

setInterval( function() { funca(10,3); }, 500 );

4
動的パラメータには何が必要ですか?
rony36 2013

28
@ rony36-あなたはおそらくあなたのためにインターバルタイマーを作成する関数が欲しいでしょう。パラメータを関数に渡して、その値が関数クロージャでキャプチャされ、タイマーが切れたときに保持されるようにします。function createInterval(f,dynamicParameter,interval) { setInterval(function() { f(dynamicParameter); }, interval); }次に、createInterval(funca,dynamicValue,500); これを複数のパラメーターに拡張できることは明らかです。そして、もっとわかりやすい変数名を使用してください。:)
tvanfosson 2013

@tvanfosson:素晴らしい答えです!関数内で間隔フォームをクリアする方法を知っていますfuncaか?
Flo

@tvanfossonありがとう。残念ですが、実際にはコメントセクションで指定したcreateIntervalの例を意味します。それはどのように機能しますか?タイマー変数を動的パラメーターとして渡すことも考えていましたが、それがどのように意味があるのか​​わかりません。明瞭にするために、私はここに新しい質問を追加しました:stackoverflow.com/questions/40414792/...
Floの

78

今ES5で、バインドメソッドFunctionプロトタイプ:

setInterval(funca.bind(null,10,3),500);

ここで参照


2
これが最良の答えですが、関数によっては予期しない動作をする可能性があります。たとえば、console.log.bind(null)("Log me")スローしますがIllegal invocationconsole.log.bind(console)("Log me")期待どおりに動作します。これは、console.log必要とconsoleとしてthisargを。
インディ

1
断然最良の答えです。リーンでクリーン。どうもありがとう!
Tobi

とても清潔で効率的!
contactmatt 14

2
Chrome> = 7、Firefox> = 4.0、Explorer> = 9、Opera> = 11.60、Safari> = 5.1(ソース:developer.mozilla.org/ca/docs/Web/JavaScript/Reference/…)で機能することを追加するだけです
Roger Veciana 2016年

60

それらをパラメータとしてsetIntervalに追加します。

setInterval(funca, 500, 10, 3);

質問の構文ではevalを使用していますが、これは推奨される方法ではありません。


2
えっ?それはいつ許可されたのですか?(深刻な質問)
Crescent Fresh

1
わからない。私のソースは:developer.mozilla.org/en/DOM/window.setInterval
Kev

2
@Kev Internet Explorerは本当の混乱です。引数の受け渡しはサポートされていません-.-
ShrekOverflow 2012年

1
私見これは受け入れられる答えであるべきです。素敵でシンプルでクリーンなソリューション。
LightMan、

32

パラメーターとしてではなく、関数オブジェクトのプロパティとしてパラメーターを渡すことができます。

var f = this.someFunction;  //use 'this' if called from class
f.parameter1 = obj;
f.parameter2 = this;
f.parameter3 = whatever;
setInterval(f, 1000);

次に、関数someFunctionで、パラメーターにアクセスします。これは、スコープが自動的にグローバルスペースに移動し、最初にsetIntervalを呼び出したクラスへの参照を失うクラス内で特に役立ちます。このアプローチでは、上記の例の「someFunction」の「parameter2」が適切なスコープになります。


1
Classname.prototype.someFunction.parameter1でアクセスできます
JoaquinG '15

2
オブジェクトまたは関数にパラメーターを追加すると、オブジェクトのネイティブコード表現を再構築する必要があるため(たとえば、これがホットループで行われた場合)、コンパイラーの速度が低下する可能性があります。注意してください。
mattdlockyer 2014

23
     setInterval(function(a,b,c){

          console.log(a + b +c);  

      }, 500, 1,2,3);

           //note the console will  print 6
          //here we are passing 1,2,3 for a,b,c arguments
         // tested in node v 8.11 and chrome 69

最もよく説明された答え。
Drk_alien 2016

では、なぜ引数を配列として渡すのでしょうか。この詳細は質問とは関係ありません。
user4642212 2018


18
setInterval(function,milliseconds,param1,param2,...)

更新:2018-「スプレッド」演算子を使用

function repeater(param1, param2, param3){
   alert(param1);
   alert(param2);
   alert(param3); 
}

let input = [1,2,3];
setInterval(repeater,3000,...input);


これははるかに優れています。
Ugur Kazdal、

これははるかに優れています。
Ugur Kazdal、

11

これまでで最も実用的な答えは、tvanfossonによって与えられたものです。私ができることは、ES6で更新されたバージョンを提供することだけです。

setInterval( ()=>{ funca(10,3); }, 500);

1
()=> {}はES(6)がfunction(){}を置き換える新しい方法だと言っていますか?面白い。まず、ロケットはすごいと思った。そして、この構文に他の一般的な用途がない限り、それは非常に奇妙です。「太った矢」だと思います。それでも、奇妙です。私は誰かがそれを好きで、それは意見の問題だと思います。
Richard_G 2016年

6

引数を引用するだけで十分です:

OK --> reloadIntervalID = window.setInterval( "reloadSeries('"+param2Pass+"')" , 5000)

KO --> reloadIntervalID = window.setInterval( "reloadSeries( "+param2Pass+" )" , 5000)

'各引数の単一引用符に注意してください。

IE8、Chrome、FireFoxでテスト済み


7
evalの使用はひどい習慣です。匿名関数を使用する方がはるかに優れています。
SuperIRis 2013

1

私はこのトピックが古すぎることを知っていますが、setInterval関数でパラメーターを渡すことについての私の解決策はここにあります。

HTML:

var fiveMinutes = 60 * 2;
var display = document.querySelector('#timer');
startTimer(fiveMinutes, display);

JavaScript:

function startTimer(duration, display) {
    var timer = duration,
        minutes, seconds;

    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        --timer; // put boolean value for minus values.

    }, 1000);
}

私は関数を呼び出すときに値にアクセスする必要がありますが、毎秒ではありません。そのため、答えはこれを提供します(例timer:)がclearInterval()、このシナリオではどのように行うのですか?
user1063287


0

別の解決策は、そのような関数を渡すことです(ダイナミクス変数を持っている場合)。setInterval( 'funca(' + x + '、' + y + ')'、500);


0

アンダースコアjsというライブラリを使用できます。bindメソッドに素敵なラッパーを提供し、構文もずっとすっきりしています。指定したスコープで関数を実行できます。

http://underscorejs.org/#bind

_.bind(関数、スコープ、*引数)


0

この問題は、クロージャーを使用するための素晴らしいデモになります。アイデアは、関数が外部スコープの変数を使用することです。ここに例があります...

setInterval(makeClosure("Snowden"), 1000)

function makeClosure(name) {
var ret

ret = function(){
    console.log("Hello, " + name);
}

return ret;
}

関数「makeClosure」は、外部スコープ変数「name」にアクセスできる別の関数を返します。したがって、基本的には、「makeClosure」関数に変数を渡し、「ret」変数に割り当てられた関数でそれらを使用する必要があります。影響すると、setIntervalは「ret」に割り当てられた関数を実行します。


0

Vueアプリでも同じ問題が発生しました。私の場合、この解決策は、mounted ()ライフサークルフックでの宣言に関して、無名関数が矢印関数として宣言されている場合にのみ機能します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.