jQuery Girl
  1. jQuery Girl
  3. Javascript: setTimeout Fermeture à l’intérieur des doubles boucles nestedes
Intereting Posts
jQuery rond décimal à 0,49 ou 0,99 Jquery bascule – développer / réduire sur plusieurs divs Userscript – Existe-t-il un moyen d’injecter du code jQuery dans angularjs dom? jQuery animate () et les performances du navigateur sélection de plusieurs éléments à l’aide de la touche Maj et du clic de souris – jQuery Comment créer dynamicment plusieurs curseurs jQuery? Méthode personnalisée avec le plugin jQuery Validation La boîte de dialog de l’interface utilisateur jQuery ne s’ouvre pas une seconde fois Backbone.js – changement d’événement non déclenché Comment obtenir les atsortingbuts d’un élément HTML en utilisant JQuery? Masquer et afficher le menu avec le même bouton en utilisant jQuery Comment utiliser $ .ajax pour définir l’image src en données image / png dynamics? Erreur history.pushState lors de l’utilisation de fancybox “Échec de l’exécution de ‘pushState’ sur ‘History’: un historique” Essayer de produire une fenêtre contextuelle lorsque l’utilisateur clique sur le graphique. La pop up est un bouton de fermeture jQuery UI dialog en positionnant toujours en haut à droite

Javascript: setTimeout Fermeture à l’intérieur des doubles boucles nestedes

Bonjour, j’essaie de recréer ce que http://austintexas.wayblazer.com/locations/austin-tx fait pour son champ de recherche: afficher le caractère saisi et effectuer une rotation entre plusieurs phrases.

Ma logique initiale consiste à lire les phrases d’un tableau comme suit: [abc,123,XYZ] , puis à utiliser un split et un forEach pour séparer la chaîne en caractères et créer un effet de frappe à l’aide de setTimeout .

Cependant, lorsque je tente cette logique, il me semble avoir du mal à obtenir l’effet souhaité. J’ai lu beaucoup de ces questions sur les SO, mais peu d’entre elles traitent des problèmes liés aux boucles nestedes.

Les résultats souhaités:

  • abc (dans un effet de frappe caractère par caractère)
  • zone de texte claire
  • 1 2 3 (dans un effet de frappe caractère par caractère)
  • zone de texte claire
  • XYZ

Résultats actuels:

  • abc123XYZ (abc apparaît en même temps, suivi de 123, puis de XYZ) 
 $(document).ready(function() { $('input#123').attr("placeholder", ""); var phrases = ['abc', '123', 'XYZ']; for (var i = 0; i < phrases.length; i++) { $('input#123').attr("placeholder", ""); (function(ind) { var sentence = phrases[ind]; sentence.split("").forEach(function(char, index) { setTimeout(function() { $('input#123').attr("placeholder", $('input#123').attr("placeholder") + char); }, ind * 500); }); })(i); } });

Y at-il une solution élégante pour ce que je veux réaliser, et j’espère qu’une explication pour m’éclairer serait très appréciée!

La bonne chose avec javascript, ce sont les fermetures. Vous pouvez donc créer des fermetures de fonctions et appuyer sur un tableau pour agir comme une stack. Vous pouvez ensuite extraire ces fonctions dans un setInterval .. 

 $(document).ready(function(){ var input = $('input#123'), phrases = ['Stack Overflow','Is the place you come','To get help with coding stuff'], typedelay = 140, waitops = 5, cmds = [], ph = input.attr.bind(input, 'placeholder'); function clear() { ph(''); } function addLetter(a) { return function () { ph(ph() + a); } } function doLoop() { cmds = []; for (var i=0; i

Voici une fonction récursive qui décale le tableau et s’arrête lorsque le tableau n’a pas de longueur 

 typePhrases(['Message #1','Another message','And the last one'], 300) function typePhrases(phrases, speed){ // shift array to get word/phrase var word = phrases.length && phrases.shift(), $input= $('#test').attr('placeholder',''); // don't do anything if no phrase/word if(word){ word.split('').forEach(function(char, i){ setTimeout(function(){ // use attr(atsortingbuteName, function) to update $input.attr('placeholder', function(_, curr){ return curr + char; }); // on last letter call function again to get next word if(i=== word.length-1){ setTimeout(function(){ typePhrases(phrases, speed); },speed); } },i*speed) }); } }