JQuery / JavaScript: почему это зависает? - PullRequest
Новая
       13

JQuery / JavaScript: почему это зависает?

0 голосов
/ 31 августа 2010

Я пытаюсь реализовать требование, которое требует, чтобы я установил максимальную длину строки для содержимого элемента div. Но когда я открываю страницу в Firefox, я получаю сообщение об ошибке «длительный скрипт», и меня просят продолжить, отладить или остановить скрипт Я не понимаю, почему это происходит. Это мой код: 

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $.fn.lineCount = function () {
                var lineHeight = this.css("line-height"); // returns "Xpx"
                return document.getElementById(this.attr("id")).offsetHeight / parseInt(lineHeight.substr(0, lineHeight.length - 2));
            };

            $.fn.truncateLineCount = function (countAfterTruncation) {
                while (this.lineCount() > countAfterTruncation) {
                    var text = this.html();
                    this.html(text.substr(0, text.length - 1) + "&hellip;");
                }
            };

            $(function () {
                $("#title").truncateLineCount(3);
            });
        </script>
    </head>

<body>
 <div id="title">
  My MVC Application<br />
  steaks<br />
  are<br />
  awesome
 </div>
</body>
</html>

Что дает?

Ответы [ 5 ]

1 голос
/ 31 августа 2010 
this.html(text.substr(0, text.length - 1) + "&hellip;");

эта строка увеличивает количество символов. удаляет последний символ, но добавляет "&hellip;" до конца линии. поэтому текст никогда не будет обрезан.

если ваш текст My MVC Application, то через некоторое время цикл становится: My MVC Applicatio................

Ваш цикл должен быть: 

while (this.lineCount() > countAfterTruncation) {
    var text = this.html();
    this.html(text.substr(0, text.length - 1));
}
this.html(this.html()+"&hellip;");
1 голос
/ 31 августа 2010

Я не думаю, что ваша функция усечения работает.

На каждой итерации цикла while вы удаляете 1 символ, но добавляете еще 8 ("&hellip;").

Возможно, вы захотите добавить многоточие после цикла.

1 голос
/ 31 августа 2010

Значение по умолчанию для свойства CSS line-height : normal .Эта строка: 

var lineHeight = this.css("line-height"); // returns "Xpx"

На самом деле возвращает "normal", который ваш код затем пытается разобрать в целое число, что приводит к NaN.

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Кроме того, как уже упоминали другие, ваш цикл удаляет 1 символ и добавляет еще 8, поэтому он никогда не станет короче.Вы должны добавить &hellip; после окончания цикла, и ваша строка будет достаточно короткой: 

            while (this.lineCount() > countAfterTruncation) {
                this.html(this.html().slice(0, -1));
            }
            this.html(this.html()+"&hellip;");

В качестве отступления я считаю необходимым добавить несколько указателей для вашего кода:

  • Как я уже упоминал в комментариях, вам не нужно отрывать px при разборе строки типа "12px" с помощью parseInt () .
  • Не используйте ключевое слово var внутри цикла, это приводит к повторной инициализации переменной на каждой итерации, что, помимо плохой практики, приведет к ошибке в строгом режиме ECMAScript 5.
  • Вы можетеиспользуйте метод slice () с отрицательным смещением для второго параметра вместо использования substring () и длины передаваемой строки - 1.
  • вместо document.getElementById(this.attr("id")), вы можете просто использовать this.get(0). this уже является элементом, обернутым jQuery, вы можете получить доступ к базовому элементу, используя метод get () .
  • Если вы можете помочь, не манипулируйте html () / innerHTML внутри циклов.Производительность очень низкая, так как он вызывает анализатор HTML на каждой итерации цикла.
0 голосов
/ 31 августа 2010

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

Вы удаляете текст из содержимого в truncateLineCount() но lineCount всегда имеет одно и то же значение, поэтому цикл while никогда не заканчивается ...

PS Будьте осторожны: truncateLineCount также удаляет html (char by char), а не только текст.

0 голосов
/ 31 августа 2010

в вашем $ .fn вы используете this вместо jQuery $ (this) .. Это может вызвать бесконечный цикл в вашем выражении while ().

...