Почему мой JavaScript застрял в бесконечном цикле?

Я определяю событие «отправить» следующим образом:

HTML-код:

<div class = "messages">
            <ul>
                <li class = "sent">
                    <img src = "/img/person1.png" alt = "" />
                    <p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?!</p>
                </li>
                <li class = "replies">
                    <img src = "/img/botimg.png" alt = "" />
                    <p>When you're backed against the wall, break the god damn thing down.</p>
                </li>
                <li class = "replies">
                    <img src = "/img/botimg.png" alt = "" />
                    <p>Excuses don't win championships.</p>
                </li>
                <li class = "sent">
                    <img src = "/img/person1.png" alt = "" />
                    <p>Oh yeah, did Michael Jordan tell you that?</p>
                </li>
                <li class = "replies">
                    <img src = "/img/botimg.png" alt = "" />
                    <p>No, I told him that.</p>
                </li>
            </ul>
        </div>
        <div class = "message-input">
            <div class = "wrap">
            <input type = "text" placeholder = "Write your message..." />
            <i class = "fa fa-paperclip attachment" aria-hidden = "true"></i>
            <button class = "submit"><i class = "fa fa-paper-plane" aria-hidden = "true"></i></button>
            </div>
        </div>

Вспомогательная функция:

function newMessage() {
    console.info("Inside newMessage");
    message = $(".message-input input").val();
    if ($.trim(message) == '') {
        return false;
    }
    $('<li class = "sent"><img src = "/img/person1.png" alt = "" /><p>' + message + '</p></li>').appendTo($('.messages ul'));
    $('.message-input input').val(null);
    $(".messages").animate({ scrollTop: $(document).height() }, "fast");
};

Функция отправки клика:

$('.submit').click(function() {

  newMessage();

});

Теперь всякий раз, когда я нажимаю кнопку отправки, сообщение «Inside newMessage» постоянно регистрируется в консоли JavaScript.

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

Samuel Hulla 08.04.2019 19:49

Ваш код работает нормально. Не могли бы вы создать рабочую скрипку.

random 08.04.2019 19:52

Можно прочитать о браузере, который вы используете, и о поддержке функции анимации - предостережения и т. д. - я выполнил ваш код и не могу воспроизвести бесконечный цикл. Можно изменить его на window.scroll({top: 0, left: 0, behavior: 'smooth' });

theusual 08.04.2019 19:55

Ваш код у меня работает без ошибок.

shadow2020 08.04.2019 19:56

Работает при нажатии вошел. Он застревает в бесконечном цикле при нажатии кнопки отправки.

user3243499 08.04.2019 20:19

Если вы замените console.info() на alert(), вы увидите, что одно и то же сообщение бесконечно печатается снова и снова.

user3243499 08.04.2019 20:20

Опубликуйте минимальный воспроизводимый пример.

melpomene 08.04.2019 20:20

Вот рабочий пример: jsfiddle.net/37gsfL8o

user3243499 08.04.2019 20:30

Странно, мой код работает там в скрипке, но зависает в Chrome. Любые подсказки этого необычного поведения?

user3243499 08.04.2019 20:31

Этот код скрипки является полным кодом. Я просто пытаюсь создать фиктивный чат-бот для практики. Код не для конкретной организации.

user3243499 08.04.2019 20:32

Это не "минимум", это куча кода. Он даже не разделен на HTML, CSS и JavaScript.

melpomene 08.04.2019 20:34

Да, именно поэтому я не хотел помещать весь код и оставил только минимальный код в этом посте. Но некоторым людям нужен работающий код скрипки.

user3243499 08.04.2019 20:36

Еще одно наблюдение, которое у меня есть, это то, что код работает в режиме «инкогнито» Chrome, но не в обычном режиме.

user3243499 08.04.2019 20:37

Поскольку это исправлено очисткой кеша, думаю, вопрос можно закрыть. Из официальных причин закрытия: Этот вопрос был вызван проблемой, которая больше не может быть воспроизведена, или простой типографской ошибкой. Хотя подобные вопросы могут быть здесь по теме, этот был решен способом, который вряд ли поможет будущим читателям.

halfer 13.05.2019 00:37

@halfer Я также только что проголосовал за закрытие этого вопроса. Как глупо я был, чтобы открыть этот вопрос. Закроем вместе. :)

user3243499 13.05.2019 10:10

Совсем не глупо — часто задаваемый вопрос действует как резиновая утка. В моей истории Stack Overflow есть множество вопросов, на которые я сам ответил :-)

halfer 13.05.2019 10:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
16
90
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Теперь он работает после очистки истории просмотров Chrome, особенно «файлов cookie и других данных».

Другие вопросы по теме