Как я могу сделать эту функцию 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 smaller_text = text;
    var original = text.length;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        temp.html(smaller_text);
        item_width = temp.width();
    }

    var final_length = smaller_text.length;
    if (final_length != original) {
        return (smaller_text + '…');
    } else {
        return text;
    }
}

Это прекрасно работает, но поскольку я вызываю функцию для многих фрагментов текста, в любом браузере, кроме Safari 4 и Chrome, она действительно медленная.

Я пытался использовать метод двоичного поиска, чтобы сделать это более эффективным, но то, что у меня есть, вызывает медленный диалог сценариев в моем браузере:

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

    var lower = 0;
    var original = text.length;
    var higher = text.length;

    while (item_width != ideal) {

        var mid = parseInt((lower + higher) / 2);
        var smaller_text = text.substr(0, mid);
        temp.html(smaller_text);
        item_width = temp.width();

        if (item_width > ideal) {

            // make smaller to the mean of "lower" and this
            higher = mid - 1;

        } else {

            // make larger to the mean of "higher" and this
            lower = mid + 1;

        }
    }

    var final_length = smaller_text.length;
    if (final_length != original) {
        return (smaller_text + '…');
    } else {
        return text;
    }
}

Кто-нибудь имеет представление о том, что я должен делать, чтобы сделать эту функцию максимально эффективной?

Спасибо! Simon

Answer 1

Я использовал 2 деления

<div class="englober">
<div class="title"></div>
</div>

.englober имеет фиксированное значение with и переполнение: скрыто, пробел: nowarp.

Затем, используя jQuery, я изменяю размер текста из .title, чтобы он соответствовал .englober:

while ($(".title").width() > $(".englober").width())
{
    var dFontsize = parseFloat($(".title").css("font-size"), 10);
    $(".title").css("font-size", dFontsize - 1);
}

Answer 2

Проблема с вашим скриптом, вероятно, в том, что условие while (item_width != ideal), возможно, никогда не прервет цикл. Может быть невозможно обрезать введенный текст до точной ширины ideal. В этом случае ваша функция зациклится навсегда, что вызовет диалог медленного сценария.

Чтобы обойти это, вы должны прекратить зацикливание, если отображаемый текст достаточно мал (иначе, добавление большего количества символов сделает его слишком большим).