Я тут таймер сделал, но почему то когда я переключаю окно на что-то другое, таймер останавливается. В чем проблема?

Проблема, которую вы описываете, связана с особенностями работы браузерной среды и управлением потоком выполнения кода в JavaScript.

Когда вы переключаете окно на что-то другое, браузер снижает приоритет выполнения JavaScript-кода для уменьшения нагрузки на процессор и сохранения ресурсов. Это означает, что таймер может быть приостановлен, так как отставание во времени недопустимо для большинства задач, и браузер не может гарантировать точность выполнения функции setInterval или setTimeout.

Для сохранения работы таймера в фоновом режиме вы можете использовать Web Workers или requestAnimationFrame.

Web Workers позволяют выполнять фоновые задачи в отдельном потоке, что позволяет таймеру продолжать выполняться независимо от того, активна ли текущая вкладка в браузере. Чтобы использовать Web Workers, вам необходимо создать отдельный файл JavaScript, в котором будет выполняться код таймера, и создать соответствующий объект Worker в основном скрипте. Например:

// worker.js
setInterval(function() {
    // ваш код таймера
}, 1000);

// main.js
var timerWorker = new Worker('worker.js');

Второй вариант - использовать функцию requestAnimationFrame для обновления отображения таймера. Функция requestAnimationFrame используется для планирования выполнения анимации перед следующим апдейтом экрана. Она гарантирует более плавное обновление и предпочтительнее для таких задач, как отображение таймеров. Например:

var startTime = performance.now();

function updateTimer(currentTime) {
    var elapsed = currentTime - startTime;
    // ваш код обновления таймера
    requestAnimationFrame(updateTimer);
}

requestAnimationFrame(updateTimer);

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