Как остановить выполнение скрипта js
Для остановки выполнения JS кода на странице, можно сделать так:
- Открыть DevTools и перейти на вкладку Sources;
- Выбрать файл с логикой по которому будет вестись работа и найти необходимую строчку кода где необходимо поставить брейкпоинт;
- Слева от строки находится столбец с ее номером. Если на него нажать, то появится синий значок — это и есть брейкпоинт того, чтобы использовать точку останова в DevTools;
Там же, кстати, ими можно и управлять:
- Чтобы отключить брейкпоинт, достаточно убрать галочку рядом с ним
- Удалить брейкпоинт можно с помощью нажатия на правую кнопку мыши около точки останова
Еще бывают точки останова в коде, которые можно самостоятельно поставить в коде. Для создания такого брейкпоинта нужно просто вызвать debugger в коде. Этот подход эквивалентен предыдущему способу, через DevTools, только без использования визуального интерфейса.
console.log('a'); console.log('b'); debugger; console.log('c'); Еще есть вариант использовать throw. Инструкция throw позволяет генерировать исключения, определяемые пользователем. При этом выполнение текущей функции будет остановлено (инструкции после throw не будут выполнены), и управление будет передано в первый блок catch в стеке вызовов. Если catch блоков среди вызванных функций нет, выполнение программы будет остановлено.
const sayMeow(cat) => if (!cat.meow) throw new Error('это не кот и он не умеет говорить мяу!'); > cat.meow() > Ну и наконец можно использовать точки останова в DOM, если вы собираетесь приостановить код, который изменяет узел DOM или его дочерние элементы. Это делается следующим образом:
- Перейдите во вкладку Elements
- Найдите элемент, на который нужно установить брейкпоинт
- Нажмите на элемент правой кнопкой мыши
- Наведите мышь на Break on, а затем выберите Subtree modifications, Attribute modifications или Node removal в зависимости от того, что вы хотите сделать. Ниже расскажем, что это такое и как работает.
Более подробно про точки останова можно прочитать здесь, в интересной статье, на Хекслете.
break
Оператор break прерывает выполнение текущего цикла, оператора множественного выбора switch или блочного выражения с меткой. Выполнение кода продолжается с конструкции, следующей за прерванной.
Интерактивный пример
Синтаксис
break [label];
label Необязательный
Идентификатор связанной метки. Если прерываемое выражение не цикл или switch , указание метки обязательно.
Описание
С помощью оператора break можно прервать выполнение блочного выражения с меткой. В таком случае break должен находиться внутри блока кода с указанной меткой. Само блочное выражение может быть любым, а не только циклом.
Использование break , с меткой или без, невозможно внутри функции, которая вложена в прерываемые цикл, конструкцию switch или блочное выражение с меткой.
Примеры
break в цикле while
Следующая функция использует оператор break для выхода из цикла while , когда i станет равно 3, и возвращает значение 3 * x .
function testBreak(x) var i = 0; while (i 6) if (i == 3) break; > i += 1; > return i * x; >
break в конструкции switch
В примере оператор break прервёт выполнение switch сразу после выполнения кода в совпавшем case .
const food = "sushi"; switch (food) case "sushi": console.log("Sushi is originally from Japan."); break; case "pizza": console.log("Pizza is originally from Italy."); break; default: console.log("I have never heard of that dish."); break; >
break в блочном выражении с указанной меткой
В примере используется оператор break с меткой. В таком случае break обязательно должен быть вложен в блок кода с той же меткой. Обратите внимание, что inner_block вложен в outer_block .
outer_block: inner_block: console.log("1"); break outer_block; // break прервёт выполнение кода как в inner_block, так и в outer_block console.log(":-("); // не будет выполнено > console.log("2"); // не будет выполнено >
break вне блочного выражения с указанной меткой
В примере также используется break с меткой, но код будет выполнен с ошибкой SyntaxError , потому что break находится в блоке с меткой block_1 , а прерывается выполнение блока кода с меткой block_2 . Ещё раз, в таком случае break обязательно должен быть вложен в блок кода с меткой, выполнение которого требуется прервать.
block_1: console.log('1'); break block_2; // SyntaxError: label not found > block_2: console.log('2'); >
break внутри функций
Код в примерах также будет выполнен с ошибкой SyntaxError , потому что в обоих случаях break находится в теле функции, вложенной в прерываемый цикл или прерываемое блочное выражение с меткой.
function testBreak(x) var i = 0; while (i 6) if (i == 3) (function() break; >)(); > i += 1; > return i * x; > testBreak(1); // SyntaxError: Illegal break statement
block_1: console.log('1'); ( function() break block_1; // SyntaxError: Undefined label 'block_1' >)(); >
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-break-statement |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как остановить выполнение функции?
Как остановить функцию при клике? К примеру когда я нажимаю на кнопку с id=»GD»
должна запустится функция timerGD(), а функции timerHY() и timerIU() перестать работать.
Как это можно сделать?
switches.addEventListener("click", (event) => < if (event.target.id == "NY") < timerNY(); console.log(1); >else < //? >if (event.target.id == "GD") < timerGD(); console.log(2); >else < //? >if (event.target.id == "IU") < timerIU(); >else < //? >>);- Вопрос задан более года назад
- 821 просмотр
4 комментария
Простой 4 комментария
как выглядят эти функции таймеров?
Alexander3928 @Alexander3928 Автор вопроса
export function timerGD() < let timeGD = new Date("Mar 8 2023 00:00:00"); const timer = () =>< let now = new Date(); let getLeft = timeGD - now; const titleNY = "Eigth March"; const zero = "0"; let days = Math.floor(getLeft / 1000 / 60 / 60 / 24); let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24; let minutes = Math.floor(getLeft / 1000 / 60) % 60; let seconds = Math.floor(getLeft / 1000) % 60; if (days < 10) days = zero + days; if (hours < 10) hours = zero + hours; if (minutes < 10) minutes = zero + minutes; if (seconds < 10) seconds = zero + seconds; document.querySelector(".title-big").textContent = titleNY; document.querySelector(".timer-days__days").innerHTML = days; document.querySelector(".timer-hours__hours").innerHTML = hours; document.querySelector(".timer-minutes__minutes").innerHTML = minutes; document.querySelector(".timer-seconds__seconds").innerHTML = seconds; >; timer(); setInterval(timer, 1000); >
clearInterval
Сделайте для каждой ф-и глобальную переменную-флаг, которые они будут проверять периодически при работе. Если флаг true — продолжают работать, false — завершаются. Примерно так:
let NY = true function timerNY() < while(NY && ваши условия повтора)< // основной код ф-ии >>в момент когда нужно завершить работу ф-ии меняете флаг на false
NY = false
Но это один из вариантов, можно и другие сделать через интервал и очистку.
Решения вопроса 1
Web-разработчик
export function timerGD() < let timeGD = new Date("Mar 8 2023 00:00:00"); const timer = () =>< let now = new Date(); let getLeft = timeGD - now; const titleNY = "Eigth March"; const zero = "0"; let days = Math.floor(getLeft / 1000 / 60 / 60 / 24); let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24; let minutes = Math.floor(getLeft / 1000 / 60) % 60; let seconds = Math.floor(getLeft / 1000) % 60; if (days < 10) days = zero + days; if (hours < 10) hours = zero + hours; if (minutes < 10) minutes = zero + minutes; if (seconds < 10) seconds = zero + seconds; document.querySelector(".title-big").textContent = titleNY; document.querySelector(".timer-days__days").innerHTML = days; document.querySelector(".timer-hours__hours").innerHTML = hours; document.querySelector(".timer-minutes__minutes").innerHTML = minutes; document.querySelector(".timer-seconds__seconds").innerHTML = seconds; >; if(!GD) < clearInterval(cl); return; >timer(); const cl = setInterval(timer, 1000); > let NY=true; let GD=true; let IU=true; switches.addEventListener("click", (event) => < if (event.target.id == "NY") < timerNY(); console.log(1); GD=false IU=false >else < //? >if (event.target.id == "GD") < timerGD(); console.log(2); NY=false IU=false >else < //? >if (event.target.id == "IU") < timerIU(); GD=false NY=false >else < //? >>);Ответ написан более года назад
Alexander3928 @Alexander3928 Автор вопроса
К сожалению такой вариант, не работает(. Таймеры не останавливаются
Alexander3928, всё верно, отредактировал — надо было return из ф-ии добавить после очистки.
Alexander3928 @Alexander3928 Автор вопроса
Антон Горецкий, Я не знаю почему, но таймера начинают нормально переключатся, только со 2 нажатия по кнопке EIGTH MARCH. В чем может быть такой ошибки?
document.addEventListener("DOMContentLoaded", allTimer); function allTimer() < let timeNY = new Date("Jan 1 2023 00:00:00"); let timeGD = new Date("Mar 8 2023 00:00:00"); let fNY = true; let fGD = false; const timerNY = () =>< let now = new Date(); let getLeft = timeNY - now; const titleNY = "New Year"; const zero = "0"; let days = Math.floor(getLeft / 1000 / 60 / 60 / 24); let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24; let minutes = Math.floor(getLeft / 1000 / 60) % 60; let seconds = Math.floor(getLeft / 1000) % 60; if (days < 10) days = zero + days; if (hours < 10) hours = zero + hours; if (minutes < 10) minutes = zero + minutes; if (seconds < 10) seconds = zero + seconds; document.querySelector(".title-big").textContent = titleNY; document.querySelector(".timer-days__days").innerHTML = days; document.querySelector(".timer-hours__hours").innerHTML = hours; document.querySelector(".timer-minutes__minutes").innerHTML = minutes; document.querySelector(".timer-seconds__seconds").innerHTML = seconds; if (!fNY) clearInterval(clearNY); >; timerNY(); const clearNY = setInterval(timerNY, 1000); const timerGD = () => < let now = new Date(); let getLeft = timeGD - now; const titleGD = "Woman's Day"; const zero = "0"; let days = Math.floor(getLeft / 1000 / 60 / 60 / 24); let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24; let minutes = Math.floor(getLeft / 1000 / 60) % 60; let seconds = Math.floor(getLeft / 1000) % 60; if (days < 10) days = zero + days; if (hours < 10) hours = zero + hours; if (minutes < 10) minutes = zero + minutes; if (seconds < 10) seconds = zero + seconds; document.querySelector(".title-big").textContent = titleGD; document.querySelector(".timer-days__days").innerHTML = days; document.querySelector(".timer-hours__hours").innerHTML = hours; document.querySelector(".timer-minutes__minutes").innerHTML = minutes; document.querySelector(".timer-seconds__seconds").innerHTML = seconds; if (!fGD) clearInterval(clearGD); >; const clearGD = setInterval(timerGD, 1000); const switchesTarget = () => < const switches = document.querySelector(".switches"); switches.addEventListener("click", (event) => < if (event.target.id == "NY") < timerNY(); fNY = true; fGD = false; console.log(fNY, fGD); >if (event.target.id == "GD") < timerGD(); fNY = false; fGD = true; console.log(fNY, fGD); >>); >; switchesTarget(); >Остановить выполнение скрипта | JavaScript
Прервать работу скрипта или в чём разница между return; return false; return true;
Если не нужно знать достигла ли функция положительного исхода, то достаточно указать return без значения:
Если дальнейшее выполнение скрипта должно прерываться (или развиваться по другому пути) при достижении положительного исхода рассматриваемой функции, то return присваивается значение, чаще false или true :