Wie kann ich meine Funktion loopen?

Question

Dies ist eine Div-Animation per Klick. Wenn die Befehle enden, wird die Funktion jedoch nicht neu gestartet. Ich habe es mit einem Rückruf versucht, aber vielleicht stimmt die Kollokation nicht.

This is my codepen:

$(function() { 
    //set animation 
    $('.fa-arrow-left').on('click', function set_animation() { 
    $('.container .set').css({ 
     'transform': 'translate(27px)' 
    }); 
    $('.fa-arrow-left').css({ 
     'transform': 'rotate(180deg)' 
    }); 

    $('.fa-arrow-left').on('click', function() { 
     $('.container .set').css({ 
     'transform': 'translate(220px)' 
     }); 
     $('.fa-arrow-left').css({ 
     'transform': 'rotate(0deg)' 
     }); 
    }) 
    }); 
}) 

Answer 1

Wenn Sie sich nicht, wenn der Code innerhalb des Timer kann länger dauern als Ihr Intervall, verwenden Sie setInterval():

setInterval (Funktion, Verzögerung)

Damit wird die als erster Parameter übergebene Funktion immer wieder ausgelöst.

window.setInterval(function() { 
// method to be executed; 
}, 5000); //Run the function every 5 seconds 

Ein besserer Ansatz ist, zu verwenden setTimeout zusammen mit einer self-executing anonymen Funktion:

(function(){ 
// do some stuff 
setTimeout(arguments.callee, 60000); 
})(); 

, die garantiert, dass der nächste Anruf nicht gemacht wird, bevor der Code ausgeführt wurde. Ich habe arguments.callee in diesem Beispiel als Funktionsreferenz verwendet. Es ist eine bessere Art und Weise der Funktion einen Namen zu geben und dass innerhalb SetTimeout zu nennen, weil arguments.callee in ECMAScript ist veraltet 5.

Answer 2

Sie mit Verzögerung versuchen:

$(document).ready(function() 
{ 
    $('.fa-arrow-left').on('click', set_animation()); 
}); 
function set_animation() 
{ 
     $('.container .set').css({ 
      'transform': 'translate(27px)' 
     }); 
     $('.fa-arrow-left').css({ 
      'transform': 'rotate(180deg)' 
     }); 
     $('.fa-arrow-left').on('click', function() { 
      $('.container .set').css({ 
       'transform': 'translate(220px)' 
      }); 
      $('.fa-arrow-left').css({ 
       'transform': 'rotate(0deg)' 
      }); 
     }); 
     this.delay(800, setanimation); 
} 

Dies ist eine „Callback-Funktion“ genannt wird, . Die Idee ist, dass es aufgerufen wird, wenn die Funktion beendet ist.