Подтвердить что ты не робот

Javascript-код для сокращения длинного текста нуждается в оптимизации

ПРИМЕЧАНИЕ. Первоначально это было указано как утечка памяти. Изучив это глубже, я обнаружил, что это не проблема памяти. Это очень медленный script. Будем очень благодарны за любые предложения по ускорению этого.

ДРУГОЕ ПРИМЕЧАНИЕ:. Изучив это еще больше, я вижу, что FF не поддерживает какой-либо тип CSS, который форматирует текст при переполнении. Существует hack и обходной путь для этого взлома. но это не будет подходящим решением.

Я проголосовал за и присоединился к списку электронной почты на этой конкретной ошибке в mozilla. Мне почти шесть лет, поэтому я решил, что пользователям сейчас придется иметь дело с этим. По крайней мере, это не общий сценарий для нашего продукта.

Оригинальное сообщение:

script обрезает значение элемента и добавляет '...', в то время как его scrollWidth больше, чем offsetWidth. (например, значение "LastName, VeryLongFirstName" изменится на нечто вроде "LastName, Ver...", в зависимости от ширины столбца)

var eTable = document.getElementById(this._eDiv.id + "_tbl");

//...lots of code here...

//function called that gets all cells in a table, loops through them and clips the text
addEventListenerEx(window, "load", function() {     
        var aCells = eTable.getElementsByTagName("DIV");
        window.alert(aCells.length);   
            //When aCells is length of 100, we're ok...but when it big (like 3,000) I have problems         
        for (var i = 0; i < aCells.length; i++){
            Grid.clipText(aCells[i]);
        }
}, false);

//...lots of code here...

//This is the function doing the actual clipping
Grid.clipText = function (oDiv) {   

    //for tooltip       
    var oCurDiv;
    var oTagA;
    var sToolTip;       
    if (oDiv.firstChild) {
            if (oDiv.firstChild.firstChild){            
                oCurDiv = oDiv.firstChild;
                while (oCurDiv) {
                    if (is.ie) {
                        oTagA = oCurDiv;                        
                    } else {
                        // there are some different between IE & FireFox.
                        oTagA = oCurDiv.firstChild.parentNode;                      
                    }
                    if (oTagA.tagName == "A") {
                        sToolTip = oTagA.innerHTML;     
                        if (sToolTip.indexOf('<b>') > 0) {
                            sToolTip = sToolTip.replace('<b>',"");
                            sToolTip = sToolTip.replace('</b>',"");
                        }
                        if (sToolTip.indexOf('<B>') > 0) {
                            sToolTip = sToolTip.replace('<B>',"");
                            sToolTip = sToolTip.replace('</B>',"");
                        }                       
                        oTagA.parentNode.title = convertHTMLToText(sToolTip);
                    }
                    oCurDiv = oCurDiv.nextSibling;                                      
                }
            } else {
                oDiv.title = convertHTMLToText(oDiv.innerHTML);
            }
        }

        //NOTE:  Additional steps to take for non-IE browsers
        if (!is.ie) {
                    var oText = oDiv;           
                    while (oText.nodeType != 3) {
                        oText = oText.firstChild;
                    }

                    var sDisplayText = oText.nodeValue;
                    if (sDisplayText.length < 3) return; 

                    var lastThree;
                    sDisplayText = sDisplayText.slice(0, parseInt(oDiv.offsetWidth / 5));
                    oText.nodeValue = sDisplayText + "...";

                    //NOTE:  Bad things happen here because of this loop
                    while (oDiv.scrollWidth > oDiv.offsetWidth && sDisplayText != "") {
                        lastThree = sDisplayText.slice(-3);
                        sDisplayText = sDisplayText.slice(0, sDisplayText.length - 3);
                        oText.nodeValue = sDisplayText + "...";
                    }
                    oText.nodeValue = sDisplayText + lastThree.slice(0, 1) + "...";
                    while (oDiv.scrollWidth > oDiv.offsetWidth && sDisplayText != "") {
                        oText.nodeValue = sDisplayText + "...";
                    }
                }

Работает код. Однако проблема заключается в том, что она вызывалась снова и снова после загрузки таблицы на страницу. Когда таблица огромна ( > 1500 ячеек), это когда проблема начинается.

Итак, я действительно ищу способ сделать этот пример (особенно цикл WHILE) более эффективным.

4b9b3361

Ответ 2

Ничто в этом не соберется само по себе. Вы, вероятно, пропустите oText в закрытии, можете ли вы показать окружающий код?

Btw, здесь гораздо более эффективный способ сделать это:

http://jsfiddle.net/cwolves/hZqyj/

Если вы действительно хотите продолжать делать это так, как вы, вы можете оценить точку отсечки, взяв длину строки и умножая ее на пропорциональную ширину, которая должна быть...

например. если строка - 100 символов, и она равна 2x, если она должна быть, разрежьте ее до 50 символов и перепроверьте. Или вы можете реализовать бинарный алгоритм поиска, чтобы получить правильную длину.