Я новичок, так что все эти мелочи я бегу в том, что я просто не знаю, если я не прочитал это «очень» аккуратно в документации (которую я редко).

Часто при устранении неполадок я узнаю, что я сделал не так. Пока я отлаживаю, я всегда проигрываю в голове этот диалог: «Смотри! Это будет что-то очень маленьким и тупым.» И чем дольше я беру для отладки что-то, тем больше тонут знания в конце. Потому что, кто хочет провести все это время найти ответ, особенно, когда это было так просто ... о, что я мог бы сделать, если бы я получил все эти отладочные часы назад!

Вот пример моего а-ха с методом setTimeout в JavaScript.

Неправильный путь

Сначала я покажу вам неправильный путь и то, что он делает. Следующий блок кода делает это:

var timeLeft = document.getElementById('time-left').innerHTML
function fiveSeconds() {
  timeLeft = `<h2>There is only 10 seconds left...<h2>`;
  console.log(`There is only 10 seconds left...`);
}
function tenSeconds() {
  timeLeft = `<h2>There is only 5 seconds left...<h2>`;
  console.log(`There is only 5 seconds left...`);
}
function timeUp() {
  timeLeft = `<h2>Time's up!!!<h2>`;
  console.log(`Done!!!`);
}
alert("I am an alert");
// the wrong way
setTimeout(fiveSeconds(), 1000 * 5);
setTimeout(tenSeconds(), 1000 * 10);
setTimeout(timeUp(), 1000 * 15);

На первый взгляд, я не увидел ничего плохого в моих setTimeout (s). Метод принимает функцию, которая требуется, и дополнительный номер в миллисекундах для запуска функции после этого заданного времени истекло (есть и другие дополнительные параметры, но это выходит за рамки этой статьи - идите сюда, чтобы видеть больше ).

Правильный путь

Вот что я хотел, чтобы код делал или, другими словами, правильно:

var timeLeft = document.getElementById('time-left').innerHTML
function fiveSeconds() {
  timeLeft = `<h2>There is only 10 seconds left...<h2>`;
  console.log(`There is only 10 seconds left...`);
}
function tenSeconds() {
  timeLeft = `<h2>There is only 5 seconds left...<h2>`;
  console.log(`There is only 5 seconds left...`);
}
function timeUp() {
  timeLeft = `<h2>Time's up!!!<h2>`;
  console.log(`Done!!!`);
}
alert("I am an alert");
// the correct way
setTimeout(fiveSeconds, 5000);
setTimeout(tenSeconds, 1000 * 10);
setTimeout(timeUp, 1000 * 15);

Уловили изменение кода? Подсказка: весь код из alert () и выше одинаков.

Я просто удалил круглые скобки открытия / закрытия, и метод сработал так, как ожидалось. Ожидание 5 секунд до стреляя в fiveSeconds) функции (, а затем ждет еще 5 секунд (10 секунд в общей сложности), чтобы выпалить следующую функцию, и так далее.

Отладка и документация

Когда я отлаживаю, я обычно просматриваю все свои функции, их синтаксис, орфографические ошибки, неправильно поставленные запятые и т. Д. Я могу запустить его снова, не меняя никакого кода (например, это когда-либо исправляло код, ха-ха 😂).

Я всегда склоняюсь к ошибка пользователя во-первых, потому, что, 1) Я манекен ... гм, новичку и 2) люди, которые создали JavaScript являются немного умных, чем у меня. Я в этом уверен.

Затем возвращаюсь в документацию. Ага! Ну, не сразу а-ха, но вроде как там было. Просто не упоминается явно.

Есть много разных способов передать первый параметр, который является обязательной функцией. Просто я пишу то, что было интуитивно мне , который был «fiveSeconds ()» и неправильный путь для моего примера, по крайней мере . Теперь, если я написал это как «fiveSeconds » или как анонимной функции как:

setTimeout(function() {
  timeLeft = `<h2>There is only 10 seconds left...<h2>`;
  console.log(`There is only 10 seconds left...`);
}, 5000);

Или, если я использовал встроенный метод JS , который, кажется, из приведенных ниже примеров из W3Schools (myWindow.close () ) я мог бы использовать открытый / закрыть скобку, а затем я никогда бы не пошел в эту кроличью нору.

Вот другие примеры с сайта w3schools.com, которые привели к моему а-ха:

Но что, если у вас есть функция, которая будет передаваться в таких аргументах:

function fiveSeconds(num1, num2) {
  var result = num1 + num2;
  timeLeft = `<h2>There is only ${result} seconds left...<h2>`;
  console.log(`There is only ${result} seconds left...`);
}
// will this work?
setTimeout(fiveSeconds(5, 5), 1000 * 5);

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

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

Бонус

Вы могли заметить, что выше я написал аргумент миллисекунды двумя разными способами. Теперь второй лучший способ заключался не только в том, чтобы я рефакторинг и раскрыл свой талант (я дам вам знать, если это произойдет). Но я видел это, и это был такой элегантный способ написать. Это немного больше кода, но в некоторых случаях более добро для чтения.

setTimeout(fiveSeconds, 5000);
setTimeout(fiveSeconds, 1000 * 5);

Примерно для 5 секунд запись 5000 миллисекунд, вероятно, лучше почти во всех случаях. Но если вы имеете дело с чем-то вроде 60 с лишним секунд, легче читать с другой стороны. Давайте посмотрим:

setTimeout(sixtySeconds, 60000);
setTimeout(sixtySeconds, 1000 * 60);

Думаю, это довольно аккуратно.

Больше контента на plainenglish.io