Как остановить выполнение функции js
Перейти к содержимому

Как остановить выполнение функции js

  • автор:

Остановить выполнение скрипта | JavaScript

Прервать работу скрипта или в чём разница между return; return false; return true;

Если не нужно знать достигла ли функция положительного исхода, то достаточно указать return без значения:

   

Если дальнейшее выполнение скрипта должно прерываться (или развиваться по другому пути) при достижении положительного исхода рассматриваемой функции, то return присваивается значение, чаще false или true :

   

Как использовать return, когда функция вызывает саму себя (рекурсия)

  

Возврат массива из функции

  

Курсы javascript

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

$rElems.each(function(i)< var element = this; timeoutId = setTimeout(function()< $(element).fadeIn(600).delay(2000).fadeOut(250); >, 3000*i); >); $('.pps').hover(function()< clearTimeout(timeoutId); var dialog_img = $(this).next('img'); dialog_img.fadeIn(600); >,function()< var dialog_img = $(this).next('img'); dialog_img.stop(true).fadeOut(250); >);

Почему не срабатывает clearTimeout(timeoutId); ?

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

Для остановки выполнения JS кода на странице, можно сделать так:

  • Открыть DevTools и перейти на вкладку Sources;
  • Выбрать файл с логикой по которому будет вестись работа и найти необходимую строчку кода где необходимо поставить брейкпоинт;
  • Слева от строки находится столбец с ее номером. Если на него нажать, то появится синий значок — это и есть брейкпоинт того, чтобы использовать точку останова в DevTools;

add_breakpoint

Там же, кстати, ими можно и управлять:

  • Чтобы отключить брейкпоинт, достаточно убрать галочку рядом с ним
  • Удалить брейкпоинт можно с помощью нажатия на правую кнопку мыши около точки останова

manage_breakpoint

Еще бывают точки останова в коде, которые можно самостоятельно поставить в коде. Для создания такого брейкпоинта нужно просто вызвать 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 в зависимости от того, что вы хотите сделать. Ниже расскажем, что это такое и как работает.

dom_breakpoint

Более подробно про точки останова можно прочитать здесь, в интересной статье, на Хекслете.

Как остановить выполнение функции?

Как остановить функцию при клике? К примеру когда я нажимаю на кнопку с 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 < //? >>);
  • Вопрос задан более двух лет назад
  • 906 просмотров

4 комментария

Простой 4 комментария

hahenty

как выглядят эти функции таймеров?

Alexander3928

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); >

hahenty

clearInterval

rqdkmndh

Сделайте для каждой ф-и глобальную переменную-флаг, которые они будут проверять периодически при работе. Если флаг true — продолжают работать, false — завершаются. Примерно так:

let NY = true function timerNY() < while(NY && ваши условия повтора)< // основной код ф-ии >>

в момент когда нужно завершить работу ф-ии меняете флаг на false
NY = false
Но это один из вариантов, можно и другие сделать через интервал и очистку.

Решения вопроса 1

rqdkmndh

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 Автор вопроса
К сожалению такой вариант, не работает(. Таймеры не останавливаются

rqdkmndh

Alexander3928, всё верно, отредактировал — надо было return из ф-ии добавить после очистки.

Alexander3928

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(); >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *