Как остановить скрипт js

Отладка в браузере

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

Мы будем использовать браузер Chrome, так как у него достаточно возможностей, в большинстве других браузеров процесс будет схожим.

Панель «Исходный код» («Sources»)

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

Работая в Chrome, откройте тестовую страницу.
Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I ).
Щёлкните по панели Sources («исходный код»).

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Кликните на неё и выберите hello.js в дереве файлов. Вот что появится:

Интерфейс состоит из трёх зон:

В зоне File Navigator (панель для навигации файлов) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
Зона Code Editor (редактор кода) показывает исходный код.
Наконец, зона JavaScript Debugging (панель отладки JavaScript) отведена для отладки, скоро мы к ней вернёмся.

Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

При нажатии на клавишу Esc в нижней части экрана вызывается консоль, где можно вводить команды и выполнять их клавишей Enter .

Результат выполнения инструкций сразу же отображается в консоли.

Например, результатом 1+2 будет 3 , а вызов функции hello("debugger") ничего не возвращает, так что результатом будет undefined :

Точки останова (breakpoints)

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните на номере строки 4 . Да-да, щёлкайте именно по самой цифре, не по коду.

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии.

Вот что в итоге должно получиться (синим это те места, по которым вы должны щёлкнуть):

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, другими словами, выполнить отладку кода.

В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:

Быстро перейдите к точке останова в коде (нажав на неё на правой панели).
Временно отключите точку останова, сняв с неё галочку.
Удалите точку останова, щёлкнув правой кнопкой мыши и выбрав Remove (Удалить).
…и так далее.

Щелчок правой кнопкой мыши по номеру строки позволяет создать условную точку останова. Она сработает только в тот момент, когда выражение, которое вы должны указать при создании такой точки, истинно.

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

Команда debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:

Такая команда сработает только если открыты инструменты разработки, иначе браузер ее проигнорирует.

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке (где находится точка останова):

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:

Watch – показывает текущие значения для любых выражений.

Вы можете нажать на + и ввести выражение. Отладчик покажет его значение, автоматически пересчитывая его в процессе выполнения.

Call Stack – показывает цепочку вложенных вызовов.

В текущий момент отладчик находится внутри вызова hello() , вызываемого скриптом в index.html (там нет функции, поэтому она называется “анонимной”).

Если вы нажмёте на элемент стека (например, «anonymous»), отладчик перейдёт к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

Local показывает локальные переменные функций, а их значения подсвечены прямо в исходном коде.

В Global перечисляются глобальные переменные (то есть вне каких-либо функций).

Там также есть ключевое слово this , которое мы ещё не изучали, но скоро изучим.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему скрипту.

Для этого есть кнопки в верхней части правой панели. Давайте рассмотрим их.

– «Resume»: продолжить выполнение, быстрая клавиша F8 .

Возобновляет выполнение кода. Если больше нет точек останова, то выполнение просто продолжается, без контроля отладчиком.

Вот, что мы увидим, кликнув на неё:

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Сейчас мы внутри say() .

– «Step»: выполнить следующую команду, быстрая клавиша F9 .

Выполняет следующую инструкцию. Если мы нажмём на неё сейчас, появится alert .

Нажатие на эту кнопку снова и снова приведёт к пошаговому выполнению всех инструкций скрипта одного за другим.

– «Step over»: выполнить следующую команду, но не заходя внутрь функции, быстрая клавиша F10 .

Работает аналогично предыдущей команде «Step», но ведёт себя по-другому, если следующая инструкция является вызовом функции (имеется ввиду: не встроенная, как alert , а объявленная нами функция).

Если сравнить, то команда «Step» переходит во вложенный вызов функцию и приостанавливает выполнение в первой строке, в то время как «Step over» выполняет вызов вложенной функции незаметно для нас, пропуская её внутренний код.

Затем выполнение приостанавливается сразу после вызова функции.

Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.

– «Step into», быстрая клавиша F11 .

Это похоже на «Step», но ведёт себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете не обращать внимания на разницу, так как у нас ещё нет асинхронных вызовов.

На будущее просто помните, что команда «Step» игнорирует асинхронные действия, такие как setTimeout (вызов функции по расписанию), которые выполняются позже. «Step into» входит в их код, ожидая их, если это необходимо. См. DevTools manual для получения более подробной информации.

– «Step out»: продолжить выполнение до завершения текущей функции, быстрая клавиша Shift + F11 .

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

– активировать/деактивировать все точки останова(breakpoints).

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– включить/отключить автоматическую паузу в случае ошибки.

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

Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией под названием «Continue to here» («продолжить до этого места»).

Это удобно, когда мы хотим перейти на несколько шагов вперёд к строке, но лень устанавливать точку останова (breakpoint).

JavaScript: exit a function process

You can use the return statement to stop and exit a JavaScript function execution before it reaches the end of the function code block.

Here’s an example:

When you run the code above, JavaScript will print "Loading. " to the console and then return to the caller context. This will result in "Hello World!" not being printed to the console.

A JavaScript function always returns a value. When you don’t explicitly define the return statement, JavaScript acts there is one at the end of the code block.

When you write a function like this:

JavaScript will interpret it like the following:

Without any value actually returned, JavaScript simply returns undefined to the caller context:

Specifying exit conditions

Now that you know how to exit a JavaScript function anytime with the return statement, you can actually specify the exit condition by using an if statement.

Let’s say that you have a function with a parameter. When the parameter is present, you will print a different sentence and return

By using the return statement, you don’t have to put an else statement to run a different code block.

When to use return statement instead of throw

Now the return statement is commonly used to exit a function when you want to run a different code block depending on the passed arguments. It’s not recommended to use return when you have an exception on your code.

For example, suppose you have a function that requires an x of number type. You may write the function like this:

The function above will double the number x when x is a number, but logs an error and exit the function earlier without returning any value.

There’s nothing wrong with the code, but the function will simply return undefined and your code execution will continue down the line. If your code execution relies on the value returned by the function, it’s better for you to stop the execution of your entire script by using the throw statement.

Take a close look at the if code block below:

When you use the throw statement, the execution of your script will stop because of the error thrown by it. This way, you ensure that code execution only proceeds when there is no exception.

Learn more about throw statement here: JavaScript throw statement guide

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

About

Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.

Search

Type the keyword below and hit enter

Ezoic

report this ad

Click to see all tutorials tagged with:

Ezoic

report this ad

6 Ways To Abort Javascript Execution (Simple Examples)

Welcome to a tutorial on how to abort Javascript execution. Need to manually stop a piece of script for some reason?

In a function, simply return false or undefined .
Manually throw new Error(«ERROR») in a function.
Set a function to run on a timer – var timer = setInterval(FUNCTION, 1000) . Then clear it to stop – clearInterval(timer)
Run the script with workers that can be terminated.
Use window.stop() to prevent the page from loading and running.
For NodeJS only – Use process.abort() or process.exit() .

But just how does each method work? Let us walk through some examples in this guide. Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

ABORT JAVASCRIPT EXECUTION

All right, let us now go through all the possible methods to stop or abort Javascript execution.

METHOD 1) RETURN FALSE

This is one of the most graceful and “non-hacker” ways that I will recommend using – Just return false or return undefined in the function. It should be very straightforward and easy to understand, even for beginners.

P.S. You might also want to handle what happens after the abortion. Maybe show an “error” message or something.

METHOD 2) THROW EXCEPTION

Moving on, this is a “popular” method that I found on the Internet. Yep, it is funky to throw an “error” when it is not actually an error… But this is a guaranteed way to abort and stop scripts from proceeding any further. To not “crash” the script altogether, it is recommended to use a try-catch block to handle things gracefully – Maybe show the user a “script aborted” notification.

P.S. I will still recommend using the above return; or return false; instead – It is “softer” and “logically correct”.

METHOD 3) TIMER STOP

This is yet another one that I found on the Internet. The whole idea of this method is to put the script on a timer, and simply call clearInterval() to abort it. While it works, it is also kind of useless unless you have a script that runs in a loop or timer…

METHOD 4) WORKER TERMINATE

4A) WHAT ARE WORKERS?

For you beginner code ninjas who have not heard of workers – This is basically the Javascript way to do multithreading, allowing scripts to run in the background, allowing multiple scripts to run in parallel. If you want to learn more, I will leave a link to my other worker tutorial in the extras section below.

4B) THE MAIN SCRIPT

THE WORKER SCRIPT

THE EXPLANATION

First, we start by creating a new worker var theWorker = new Worker(«4b-worker.js») in the main script.
Take extra note that worker scripts have no access to the DOM tree. I.E. document.getElementByXX() will not work in 4b-worker.js .
This is why we have to send data to the worker in the main script – theWorker.postMessage( . );
Next in the worker script, we begin processing only when data is received – onmessage = function (evt) < . >.
When the worker is done, it returns a message back to the main script – postMessage( . ) .
Finally, back in the main script, we handle when the worker is done – theWorker.onmessage = function (evt) < . >.

As for the best part, we can abort the worker at any point in time using theWorker.terminate() .

METHOD 5) WINDOW STOP

Just use the window.stop() to stop the rest of the page from loading… Yep, it kind of works, and will stop all other scripts from loading/running. But as you might have guessed, this will also stop the HTML page from fully loading. �� Not really useful, unless you want to do an “emergency brake”.

METHOD 6) NODEJS ABORT & EXIT

This is for NodeJS only, use the process.abort() and process.exit() functions to stop the execution. The difference between them is that abort() will stop immediately, and exit() will stop as soon as possible… That is, exit() is more graceful with the cleaning up, and not an abrupt “suddenly stop everything”.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

LINKS & REFERENCES

– Stack Overflow – Tutorials Point – Code Boxx – MDN – MDN | process.exit() – NodeJS – MDN

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!