Я новичок, так что все эти мелочи я бегу в том, что я просто не знаю, если я не прочитал это «очень» аккуратно в документации (которую я редко).
Часто при устранении неполадок я узнаю, что я сделал не так. Пока я отлаживаю, я всегда проигрываю в голове этот диалог: «Смотри! Это будет что-то очень маленьким и тупым.» И чем дольше я беру для отладки что-то, тем больше тонут знания в конце. Потому что, кто хочет провести все это время найти ответ, особенно, когда это было так просто ... о, что я мог бы сделать, если бы я получил все эти отладочные часы назад!
Вот пример моего а-ха с методом 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