Как я могу сделать функцию jQuery, которая сокращает строку, используя метод двоичного поиска?

Question

Я пытаюсь создать функцию jQuery, которая будет принимать строку и фиксированную ширину в качестве входных данных, а затем с помощью метода двоичного поиска (для эффективности) «сжать» этот фрагмент текста, чтобы он был длиннее фиксированной ширины.

Это то, что я имею до сих пор:

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;
}

К сожалению, это вызывает «медленный сценарий», который никогда не завершается в моем браузере. Firebug указывает на строку 1131 из jquery.js (версия 1.3.2), которая является «уникальной» утилитой jQuery, как виновник. Однако я нигде не использую «уникальный».

Что я здесь не так делаю?

Answer 1

Можете ли вы подключить отладчик javascript и проверить, где он падает? Используйте Firebug с Firefox или MSVS с IE. Если он взорвется так сильно, что отладчик умрет, пройдитесь по функции и посмотрите, как далеко он продвинется.

Обновление на основе последних комментариев: я думаю, что вам нужно пройтись по своему коду и посмотреть, как далеко он продвинется. Я бы с подозрением отнесся к нескольким вещам:

1. Возможно, ширина объекта еще не была пересчитана (или стала недействительной) после установки нового внутреннего текста. Возможно, обновленная ширина будет недоступна до тех пор, пока пользовательский интерфейс не выполнит перенастройку.

2. Этот цикл в теории всегда должен заканчиваться, но возможно (особенно если браузер неправильно пересчитывает ширину) цикл может продолжаться вечно.

3. Возможно, вы разбиваете тег HTML, когда разбиваете внутренний текст, в результате чего ваш код вставляет искаженный HTML, что может привести к разрыву макета страницы.

Answer 2

Вы пытаетесь реализовать то, что уже есть:

свойство text-overflow:ellipsis CSS. К сожалению, он пока поддерживается только в IE, но плагин jQuery обеспечивает функциональность Firefox. Google для "text-overflow: ellipsis firefox", поскольку мне еще не разрешено публиковать ссылки.