Exécution de la fonction après ajout

Semble être beaucoup discuté mais ne trouve pas de réponse facile. Je veux m'assurer qu'une fonction est exécutée après avoir ajouté une icône de chargeur au DOM mais je comprends que l'append ne supporte pas cela. Y a-t-il des solutions faciles?Exécution de la fonction après ajout

Code actuel:

$('#tab').on('shown.bs.tab', function(e) { 
    $("#htmlelement").append('<i class="fa fa-spinner fa-spin fa-fw"></i>'); 
    functionafterappend(); 
});

Source

2017-10-12 Kevin Lindmark

Dans la dupe ci-dessus , il y a une réponse qui utilise 'ready()' sur l'élément qui appelle l'append, je donnerais un essai en premier – Huangism

Arrête d'utiliser des requêtes ajax synchrones. –

@Hangkang ce n'est pas ce que .ready() fait. dans ce cas, il pousserait simplement la requête à courir sur la prochaine coche, qui serait essentiellement identique à un intervalle de 0 setTimeout. Il n'attend pas que quelque chose soit "prêt", il le pousse juste à la file d'attente de rappel parce que le dom est prêt. –

.append est une fonction synchrone. Par conséquent, cette solution est valide et votre functionafterappend() s'exécutera seulement après l'exécution de append.

Par exemple, regardez l'exemple suivant où je suis le déclenchement d'une alerte 3 secondes après l'ajout se fait

$('div') 
 
    .append(`<p>1. Append at ${console.log(new Date())}</p>`) 
 
$('span') 
 
    .append(`<span> 2. Another Append at ${console.log(new Date())}</span>`); 
 
    
 
    // setTimeout(() => alert("Append has been completed"), 3000);

body { 
 
    padding:50px; 
 
} 
 

 
div { 
 
    border:2px solid #bbb; 
 
    background-color:#eee; 
 
    padding:10px; 
 
    margin:10px auto; 
 
} 
 

 
span { 
 
    display:block; 
 
    width:65px; 
 
    font:bold 12px Arial,Sans-Serif; 
 
    color:white; 
 
    padding:5px 10px; 
 
    background-color:black;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Lorem ipsum dolor sit amet consectetur adipiscing elitr sed diam nonumy tempe goreng.</div>

Il façon de faire est la plus simple quelque chose après une append. Sauf bien sûr, si vous voulez des fonctions de la chaîne comme ceci:

.append('<span>1. Append</span>') .prepend('<span>1. Append</span>')

Si vous voulez aller complètement fonctionnel, vous pouvez même faire la composition de fonctions comme si l'aide Lodash:

const newFunc = pipe(append, prepend);

Source

2017-10-12 12:50:56 nikjohn

On dirait que le seul qui a fonctionné pour moi. On se sent comme une solution de piratage mais ok. Merci! –

Rien de drôle à ce sujet. C'est la manière la plus simple de faire quelque chose après un «append». Sauf bien sûr, si vous voulez des fonctions de la chaîne comme ceci: '.append (' 1. Append ') .prepend (' 1. Append')' Et ainsi de suite. Si vous voulez aller complètement fonctionnel, vous pouvez même faire la composition de fonction comme si en utilisant Lodash: const newFunc = pipe (ajouter, préfixer); Ajout de ceci à la réponse aussi – nikjohn

Il est hacky, vous attendez 3 secondes pour faire quelque chose, et si je ne veux pas attendre 3 secondes? Que faire si je veux exécuter dès que l'élément ajouté est prêt? – Huangism

Exécution de la fonction après ajout

Répondre

Questions connexes