Не работает js-код без консоли

Написал JS код для динамической загрузки сообщений, но по неизвестным причинам загрузка по скроллингу работает только тогда, когда я открываю консоль. (Загрузка контента при заходе на страницу работает!)

$(document).ready(function() {
        messageNow = 20
        function onScroll() {
        var messages = $('#messages')
        var scrollHeight = messages[0].scrollHeight;
        var height = messages.height();
        //console.log((messages.scrollTop()+height)/scrollHeight*100,'% scroll');
        scroll = (messages.scrollTop()+height)/scrollHeight*100;
        if (scroll <= 20) {
            //console.log('unbind');
            messages.off('scroll', onScroll);
            messagesNow += 20;
            $.ajax({
                url: 'http://localhost:8000/forum/api/v1/getmessages/{{ channel.id }}',
                dataType: "json",
                data: {
                    count: messagesNow,
                    start: messagesNow-20,
                    inverse: 3
                },
                type: 'GET',
                success: function(data) {
                    console.log(data)
                    html = $('#messages').html();
                    message = "<div class=\"message\"><p><span class=\"name panel-colors panel-left\">%message.author.login% - %message.author.group%</span></p>%message.message.content%</div>"
                    for (var _item in data.messages) {
                        item = data.messages[_item]
                        $msg = newMessage(item)
                        messages = $('#messages')
                        messages.scrollTop(messages.scrollTop() + $msg.outerHeight(true))
                    }
                    messages.on('scroll', onScroll);
                },
                error: function(e) {
                    console.log(e)
                    messages.on('scroll', onScroll);
                }
            })
        }
    }
    function newMessage(data, old=false) {
        message = "<div class=\"message\" id=\"message-%id%\"><p><span class=\"name panel-colors panel-left\">%message.author.login% - %message.author.group%</span></p>%message.message.content%</div>"
        html = $('#messages').html();
        htmlMessage = message.replace('%message.message.content%',item.message.content)
        htmlMessage = htmlMessage.replace('%message.author.login%',item.author.login)
        htmlMessage = htmlMessage.replace('%message.author.group%',item.author.group)
        htmlMessage = htmlMessage.replace('%id%',item.message.id)
        if (old) html = htmlMessage + html
        else html += htmlMessage
        $('#messages').html(html)
        return $('#message-'+item.message.id)
    }
    messagesNow = 20
    var messages = $('#messages');
    function loadMessages() {
        $.ajax({
        url: 'http://localhost:8000/forum/api/v1/getmessages/{{ channel.id }}',
        dataType: "json",
        data: {
            count: messagesNow,
            start: messagesNow-20,
            inverse: 3
        },
        type: 'GET',
        success: function(data) {


            for (var _item in data.messages) {
                item = data.messages[_item]
                newMessage(item)
                }
                messages.scrollTop(messages.prop('scrollHeight'));

            },
                error: function() {
                }
            })
    }
    loadMessages()
    messages.on('scroll', onScroll);
    });

Html (Django-шаблон)