如何使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;
    }
}

有谁知道我应该怎么做才能使此功能尽可能高效？

谢谢！ 西蒙

Answer 1

我用了2格

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

.englober具有一个固定的，且带有-overflow：hidden，white-space：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的精确宽度。 在这种情况下，您的函数将永远循环，这将触发缓慢的脚本对话框。

为了避免这种情况，如果显示的文本足够小（也就是添加更多字符会使它太大），则应该停止循环。