Вызов setTimeout без идентификатора элемента в JavaScript

Question

У меня есть следующий код для анимации исчезновения в Javascript:

var ticks = 20;
function fadein(tick,element){
    if(element == null)
        return;

    element.style.opacity = tick/ticks;
    if(tick < ticks) {
        var s = "fadein(" + (tick+1) + "," + element + ")";
        setTimeout(s, 500/ticks);
    }
}

Проблема заключается в этой строке:

var s = "fadein(" + (tick+1) + "," + element + ")";

Элемент превращается в его строковое представление и вызывает ошибкуна следующей итерации.Я знаю, что мог бы сделать это, если бы все мои элементы имели идентификаторы, передавая eid, но я хочу скрыть много разных вещей (в разное время) и не хочу называть каждый из них.Есть ли способ сделать это в JS?

Answer 1

Используйте анонимную функцию вместо строки для вызова setTimeout. Таким образом, у вас будет легкий доступ ко всем переменным внутри функции fadein.

Помимо этого считается плохой практикой использовать setTimeout или setInterval со строковым параметром.

var ticks = 20;
function fadein(tick,element){
    if(element == null)
        return;

    element.style.opacity = tick/ticks;
    if(tick < ticks) {
        setTimeout( function() { fadein( tick+1, element ); }, 500/ticks);
    }
}

Answer 2

Используйте функцию вместо строки:

var f = function () { fadein(tick+1, element) };
window.setTimeout(f, 500/ticks);

Таким образом, вы можете отправить элемент в качестве параметра без необходимости превращать его в строковое представление.

Использование строки вsetTimeout метод был когда-то единственным способом, но сегодня считается лучшей практикой использовать функцию.

Answer 3

вместо строки вы можете передать функцию ... pure js

setTimeout(function(){.....}, 500/ticks);