Проблема с рекурсивным таймаутом вызова с использованием анонимного вызова функции для передачи значений Dynami c в ключевые кадры

Question

У меня есть проблема, которая сейчас меня взбесила. от создания стека превышают javascript вызов до передачи динамических c значений моим ключевым кадрам. Что мне нужно было сделать, так это то, что я должен был воспроизводить анимацию сверху вниз страницы, но она должна быть динамической c, как анимация первой верхней сетки, затем 2-й и т. Д., Означая, что ось y изменится после успешной анимации на оси x скажем, в 50px, то после определенной продолжительности y должно быть 100px, скажем, n снова один и тот же x [от 10 до 100 итераций] для определенного y каждый раз. Итак, я попробовал ниже. Я думаю, что единственная проблема, с которой я сталкиваюсь, это время ожидания для изменения m после каждого рекурсивного вызова.

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [ bbox.x, bbox.y, bbox.width, bbox.height ].join(" ");
svg.setAttribute("viewBox", viewBox);
var count = 0;

var s1 = document.querySelector('svg');
var s2=window.getComputedStyle(s1);

setTimeout((function a() {

    if(count==1000) {
      return false;
    }
    count=count+100;

    m=parseInt(count)+"px";
    // console.log (s2.getPropertyValue('--m')); 
    document.querySelector('svg').style.setProperty('--m',m);

    a();

})(), 19000);

css

 svg
{

    position:absolute;
    left:0px;
    bottom:0px;
    right:0px;
    top:8px;
z-index:2000;

width: 10%;

transform:translate(var(--m),0%);
position:absolute;
animation:animate2 4s linear ;

padding:0px;

}

@keyframes animate2
{
    0%
    {
    transform:translate(var(--m),0%);
    }

    20%
    {
    transform:translate(var(--m),50px);

    }
    30%
    {
    transform:translate(var(--m),0);

    }
    40%
    {
    transform:translate(var(--m),50px);

    }
    50%
    {
    transform:translate(var(--m),0);

    }
    60%
    {
    transform:translate(var(--m),50px);

    }
    70%
    {
    transform:translate(var(--m),0);

    }
    80%
    {
    transform:translate(var(--m),50px);

    }
    90%
    {
    transform:translate(var(--m),0);

    }

    100%
    {
    transform:translate(var(--m),50px);

    }

} 

Answer 1

Ваш код тайм-аута неверен.

setTimeout((function a() {

    if(count==1000) {
      return false;
    }
    count=count+100;

    m=parseInt(count)+"px";
    // console.log (s2.getPropertyValue('--m')); 
    document.querySelector('svg').style.setProperty('--m',m);

    a();

})(), 19000);

Если вы укажете свой первый аргумент до setTimeout, выражение будет иметь структуру.

(
  function a() { ... }
)
()

() собирается вызвать выражение перед ним, функцию a. Затем выражение становится возвращаемым значением из a, которое будет false или undefined. Это значение затем передается в качестве первого аргумента setTimeout, что неверно; setTimeout нужна функция .

Если ваше намерение состоит в том, чтобы установить тайм-аут l oop, попробуйте вместо этого:

function updateProperty() {
  if(count==1000) {
    return false;
  }
  count=count+100;
  m=parseInt(count)+"px";
  // console.log (s2.getPropertyValue('--m')); 
  document.querySelector('svg').style.setProperty('--m',m);

  setTimeout(updateProperty, 19000);
}

// Run the first time
updateProperty();