Comment puis-je créer une fonction jQuery qui réduit une chaîne à l'aide d'une méthode de recherche binaire?

Question

Je suis en train de créer une fonction jQuery qui prendra une chaîne et une largeur fixe en entrée, puis à travers une méthode de recherche binaire (pour l'efficacité) « rétrécir » ce morceau de texte il est donc plus que la largeur fixe.

C'est ce que j'ai jusqu'à présent:

function constrain(text, ideal_width){ 
    var temp = $('.temp_item'); 
    temp.html(text); 
    var item_width = temp.width(); 
    var ideal = parseInt(ideal_width); 

    var text_len_lower = 0; 
    var smaller_text = text; 
    var text_len_higher = text.length; 

    while (true) { 
     if (item_width > ideal) { 

      // make smaller to the mean of "lower" and this 
      text_len_higher = smaller_text.length; 
      smaller_text = text.substr(0, ((text_len_higher + text_len_lower)/2)); 

     } else { 

      if (smaller_text.length >= text_len_higher) break; 

      // make larger to the mean of "higher" and this 
      text_len_lower = smaller_text.length; 
      smaller_text = text.substr(0, ((smaller_text.length + text_len_higher)/2)); 

     } 

     temp.html(smaller_text); 
     item_width = temp.width(); 
    } 

    var new_text = smaller_text + '…' 
    return new_text; 
} 

Malheureusement, cela provoque un « script lent » qui ne se termine jamais dans mon navigateur. Firebug pointe sur la ligne 1131 de jquery.js (version 1.3.2), qui est l'utilitaire jQuery "unique". Je n'utilise pas "unique" partout cependant.

Qu'est-ce que je fais mal ici?

Answer 1

Pouvez-vous brancher un débogueur javascript et vérifier où il se bloque? Utilisez Firebug avec Firefox ou MSVS avec IE. S'il souffle si fort que le débogueur meurt, passez en revue la fonction et voyez jusqu'où ça va.

mise à jour basée sur les derniers commentaires: Je pense que vous devez parcourir votre code et voir jusqu'où il obtient. Je serais méfiant de quelques choses:

1. Peut-être que la largeur de l'objet n'a pas encore été recalculés (ou est devenu invalide) après avoir défini le nouveau texte intérieur. Il se peut que la largeur mise à jour ne soit disponible que plus tard, lorsque l'interface utilisateur effectue un réajustement. Cette boucle en théorie devrait toujours se terminer, mais c'est possible (surtout si le navigateur ne recalcule pas la largeur correctement) la boucle pourrait continuer indéfiniment.

2. Il se peut que vous divisiez une balise HTML lorsque vous divisiez le texte interne, entraînant l'insertion de code HTML incorrect dans votre code, ce qui peut entraîner la casse de la mise en page.

Answer 2

Vous essayez de mettre en œuvre quelque chose qui est déjà là:

la propriété text-overflow:ellipsis de CSS. Malheureusement, il n'est encore supporté que par IE, mais un plugin jQuery apporte la fonctionnalité à Firefox. Google pour "text-overflow: ellipsis firefox" car je ne suis pas encore autorisé à publier des liens.