ThunderCat

Купите NAS и не *** себе мозг ценами и скоростью закачки.

form_data.append('id', 123);

1) Сохранять id таймера в соответствующем замыкании. Ну или хотя бы в глобале.
то есть window.gameTimer = setTimeout()... Можете возвращать id таймера из функциие timer().

2) Добавить для всех необходимых элементов, которые пользователь должен закрасить структуру данных.
Например:
{
element: state
}
где element - ключ, который однозначно определяет элемент(уникальное значение дата атрибута, например(
а state - значение. Например, 0 - не закрашено, 1 - закрашено.

3) По факту клика на элемент(рекомендую через деллигирование) проверять что все элементы имеют состояние 1. И есть это истинно, то обнулять таймер через clearTimeout и перенаправлять на страницу результата или что там ещё Вам нужно.

4) Profit.

$a = 1;
$c = 2;

- у нас есть значение 1 и a, которая за ним смотрит.
$b =& $a;
- теперь у нас есть ещё и b, которая так же как и a смотрит за значением 1.
$a =& $c;
Теперь a смотрит вместе с c за значением 2, при этом b смотрит по-прежнему за значением 1.

Вот этоvar m_top = $('.go').offset().top;запомнит оффсет только для самого первого элемента найденного по селектору, поэтому и обрабатывается только он.
Использовать событие scroll для отслеживания вьюпорта - это наплевательское отношение к ресурсам пользователя, ведь есть более эффективное апи для этого - IntersectionObserver
Пример:

$(document).ready(function(){
  var observer = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if(entry.isIntersecting) {
        $(entry.target).addClass('active bounceInLeft');
      } else {
        $(entry.target).removeClass('active bounceInLeft');
      }
    });
  }, {threshold: 0.1});
  $('.go').each(function(){
    observer.observe(this);
  });
});

Если нужен IE или Safari старее 12, то вот полифил: https://www.npmjs.com/package/intersection-observer

Swiper то вообще не при чем:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

https://developers.google.com/web/fundamentals/per...

к файлам дописывать версию, например:

<link rel="stylesheet" href="https://dr.habracdn.net/qna/5e6a141a/frontend.css?v22">

Чтобы задать подобный вопрос, надо не знать, что такое forEach и for...of. Откройте документацию и разберитесь.

UPD. Что, никак? Ну вот вам тогда несколько моментов:

Выполнение forEach нельзя прервать (throw не в счёт), в то время как в теле for...of можно использовать break и return (да, в forEach тоже можно использовать return, но эффект будет не тот - уход на следующую итерацию, т.е., то же, что и continue для for...of).

В forEach можно назначать контекст выполнения (через второй параметр, коллбек при этом не должен быть стрелочной функцией).

Не удастся заставить forEach отложить запуск следующей итерации до окончания выполнения асинхронных операций, запущенных в текущей итерации. В случае for...of можно добавить async в объявление функции, внутри которой он находится, и использовать await.

Если в прототипе объекта есть Symbol.iterator, то это ещё не означает, что и forEach там тоже присутствует. Впрочем, тут могут быть варианты одолжить чужой forEach:

Array.prototype.forEach.call('ABC', alert);
NodeList.prototype.forEach.call(document.scripts, console.log);

Дальше сами думайте, где что предпочтительнее будет использовать.

Тебе ещё рано браться за такие сложные задачи.
Повторяй пока выполнение запроса SELECT из РНР.
А оператор LIMIT проходят в следующем классе.

Fancybox