Alexander Litvinenko

Потому что области видимости разные.

Судя по

import $ from 'jquery';

у вас тут вебпак, вобще вам рано такие вещи раз еще используете jquery, но раз уже взялись

В серверном жс каждый файл это отдельный модуль со своей собственной облатью видимости, а вебпак именно серверный жс и стараеться повторить. Вам надо импортировать и экспортировать свойства чтобы они стали доступны в других модулях.

Можно конечно как порекомендовал Андрей , но это грубый метод применимый в малых масштабах.
Скорее всего вас заинтересовало прототипное наследование и конструкторы, ну или классы если говорить о ES6

Ищите что-то похожее на это или ES6, но тогда уже и остальное использовать изх ES6+ и вам однозначно нужен будет Babel

function Test(testAttr) {
    this.foo = 'пельмень!';
    this.testAttr = testAttr;
}

var bar = new Test('Вареник!');
console.log(bar.foo); //пельмень!
console.log(bar.testAttr); //Вареник!

a:focus {
    outline: none;
}

А вы используете requestanimationframe? фризы могут быть от того что евентлуп жса не синхронизирован с событием отрисовки страницы самим браузером.

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

Drag and Drop API
File API
Canvas/Image API
fetch\web socket

первый понятно нужен для самого перетаскивания,
второй нужен для полученния самого файла до загрузки на сервер
третий это вишенка на торте, создание превью и обработка картинки с фронта(обрезать лишнее\сделать чб или чтот)
ну а четвертое, отправит файл на сервер без перезгрузки когда скажите

примеры кода думаю сами в инете найдете

Никак, в таком варианте, попробуйте промис.

return new Promise((res, rej)) => {
  setInterval(() => {
    if( ... ) {  //можно любуюю конструкцию, главное rej() выздать
        rej('big error');
        return;
    }
    res('все ок');
  });
}).catch(err => {
  console.log('2', err); // 2: сюда, доходит
}).then((payload) => {
   console.log(payload); //'все ок'
})

а зачем тут jQuery?

document.body.innerHTML = document.body.innerHTML.replace(/\<br\>/g, "\r\n");

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

f ($(window).scrollTop() + $(window).height() >= $(document).height() && !inProcess ){

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