Передать параметры в функцию 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

28
@ rony36 - вы, вероятно, хотите иметь функцию, которая создает интервальный таймер для вас. Передайте параметр в функцию, чтобы его значение регистрировалось при закрытии функции и сохранялось до истечения таймера. function createInterval(f,dynamicParameter,interval) { setInterval(function() { f(dynamicParameter); }, interval); }Затем назовите это как createInterval(funca,dynamicValue,500); Очевидно, вы можете расширить это для более чем одного параметра. И, пожалуйста, используйте более описательные имена переменных. :)
tvanfosson

@tvanfosson: отличный ответ! Вы знаете, как очистить форму интервала внутри функции funca?
Flo

@tvanfosson Спасибо. Плохо, но я имел в виду пример createInterval, который вы дали в разделе комментариев. Как это будет работать для этого? Я тоже думал о передаче переменной таймера в качестве динамического параметра, но не уверен, как или если это имеет смысл. В целях ясности я добавил новый вопрос здесь: stackoverflow.com/questions/40414792/…
Flo

78

теперь с ES5, метод связывания Прототип функции:

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

Ссылка здесь


2
Это лучший ответ, однако он может иметь неожиданное поведение в зависимости от функции. например console.log.bind(null)("Log me")скину Illegal invocation, но console.log.bind(console)("Log me")будет работать как положено. Это потому, что console.logтребует consoleв качестве thisаргумента.
Инди

1
Безусловно лучший ответ. Постно и чисто. Большое спасибо!
Тоби

Очень чистый и эффективный!
contactmatt

2
Просто добавьте, что работает с Chrome> = 7, Firefox> = 4.0, Explorer> = 9, Opera> = 11.60, Safari> = 5.1 (Источник: developer.mozilla.org/ca/docs/Web/JavaScript/Reference/… )
Роджер Вечана

60

Добавьте их в качестве параметров в setInterval:

setInterval(funca, 500, 10, 3);

Синтаксис в вашем вопросе использует eval, что не рекомендуется на практике.


2
Whaa ?! С каких пор это было разрешено? (серьезный вопрос)
Crescent Fresh

1
Точно сказать не могу. Мой источник был: developer.mozilla.org/en/DOM/window.setInterval
Кев,

2
@Kev Internet Explorer - настоящий беспорядок. Он не поддерживает передачу аргументов.
ShrekOverflow

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 для начала. При таком подходе «parameter2» в «someFunction», в приведенном выше примере, будет иметь правильную область видимости.


1
Вы можете получить доступ с помощью Classname.prototype.someFunction.parameter1
JoaquinG

2
Добавление параметров к объекту или функции может привести к замедлению работы компилятора, так как ему придется перестраивать свое собственное представление кода объекта (например, если это было сделано в горячем цикле), поэтому будьте осторожны.
mattdlockyer

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

Так зачем передавать аргументы как массивы? Эта деталь даже не относится к вопросу.
user4642212

18

Вы можете использовать анонимную функцию;

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

1
это довольно дорогой звонок!
Рой Ли

2
@Roylee Как это дорого?
user4642212

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);


Это намного лучше.
Угур Каздал

Это намного лучше.
Угур Каздал

11

Безусловно, самый практичный ответ - тот, который дает tvanfosson, все, что я могу сделать, это дать вам обновленную версию с ES6:

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

1
Вы говорите, что () => {} - это новый способ ES6 заменить функцию () {}? Интересный. Сначала я думал, что ракеты устарели. И, если этот синтаксис не имеет другого общего применения, он просто очень, очень странный. Я вижу, что они "толстые стрелы". Все-таки странно. Я думаю, кому-то это нравится, и это вопрос мнения.
Richard_G

6

Цитировать аргументы должно быть достаточно:

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

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

Обратите внимание на одинарные кавычки 'для каждого аргумента.

Протестировано с IE8, Chrome и FireFox


7
Использование eval - ужасная практика. Использование анонимной функции намного лучше.
SuperIRis

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("foo(bar)",int,lang);.... Джон Клейзер привел меня к ответу.


0

Другое решение состоит в том, чтобы передать вашу функцию следующим образом (если у вас есть динамические переменные): setInterval ('funca (' + x + ',' + y + ')', 500);


0

Вы можете использовать библиотеку с именем underscore 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 ()хуке жизненного цикла.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.