Empêcher l'insertion après de répéter sur le redimensionnement jquery

Question

J'ai une situation où l'insertion .after est répétée lorsque la fenêtre est redimensionnée. Je veux seulement que l'insert .after déclenche immédiatement une fois quand il est redimensionné - pas à plusieurs reprises. Quelle est une bonne solution pour résoudre ce problème?

if ($(options.accord) .length > 0) { 
    if ($(window).width() < 470) { 
    $tabs.addClass('example').after('enter tags here'); 
    } 
    $(window).resize(function() { 
    if ($(window) .width() < 470) { 
     $tabs.addClass('example').after('enter tags here'); 
    } 
    }); 
} 

Answer 1

Vous pouvez utiliser une variable locale pour avis si l'after() a été exécuté ou non. La fonction intérieure aura toujours accès à la variable locale quand il fonctionne:

if ($(options.accord) .length > 0) { 
    var afterAdded = false; 

    if ($(window).width() < 470) { 
    $tabs.addClass('example').after('enter tags here'); 
    afterAdded = true; 
    } 

    $(window).resize(function() { 
    if (($(window) .width() < 470) && ! afterAdded) { 
     $tabs.addClass('example').after('enter tags here'); 
     afterAdded = true; 
    } 
    }); 
} 

Answer 2

En supposant que vous retirez la classe example lorsque la taille est plus grande et vous avez plus de code pour chacune des 2 conditions. Vous pouvez vérifier la classe example puis faire votre ajouter/supprimer

if ($(options.accord) .length > 0) { 
    if ($(window).width() < 470) { 
    if(!$tabs.hasClass('example')) { 
     $tabs.addClass('example').after('enter tags here'); 
    } 
    } 
    $(window).resize(function() { 
    if ($(window) .width() < 470) { 
     if(!$tabs.hasClass('example')) { 
      $tabs.addClass('example').after('enter tags here'); 
     } 
    } 
    }); 
}