Застрял с простым слайдером

Question

ОК, я пришел с этим кодом

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var im1 = $("#slider li.first"); 
     function rev(){ 
      console.log('riv 1 is running now'); 
      im1.delay(500).animate({marginTop: "-170px"}) 
       .delay(500).animate({marginTop: "-340px"}) 
       .delay(500).animate({marginTop: "-510px"}) 
       .delay(500).animate({marginTop: "0px"}).trigger('stop'); 
     } 

     im1.bind('stop',function(){ 
      console.log("rev is called on stop") 
      rev(); 
     }); 

     console.log("rev is called the first time"); 
     rev();  
    }); 
</script> 

То, что я хочу сделать с этим, когда документ будет готов, я вызываю функцию с именем РЕД(). То, что делает эта функция, - это запуск анимации, которая слайд-шоу на слайдерах уменьшает 4 изображения. И когда анимация закончена, я запускаю событие под названием stop. С другой стороны, я определил обработчик событий, который отслеживает событие остановки и снова запускает функцию rev().

Проблема заключается в том, что при загрузке страницы эти функции запускаются за тысячу раз до начала анимации и когда предел для функций обратного вызова превышен (примерно после запуска функции 1709 раз), отображается ошибка на консоль «Недостаток RangeError: превышен максимальный размер стека вызовов»

Есть ли лучший способ сделать это?

Answer 1

Answer by Jawad Hyder:

---

Я понял проблему. Все, что мне нужно было сделать, это вызвать функцию rev в обратном вызове последней анимации.

И код выглядит так,

<script type="text/javascript"> 

     $(document).ready(function(){ 

     var im1 = $("#slider li.first"); 

     function rev(){ 
      console.log('riv 1 is running now'); 
      im1.delay(500).animate({marginTop: "-=170px"}) 
      .delay(500).animate({marginTop: "-=170px"}) 
      .delay(500).animate({marginTop: "-=170px"}) 
      .delay(500).animate({marginTop: "0px"},function stopped(){ 
                rev(); 
          console.log(" played again! ") 
            } 
      ); 
     } 

     console.log("rev is called for the first time"); 
     rev();  
     }); 
     </script> 

Если кто-либо еще с той же проблемой, использовать один и тот же трюк.