Дождитесь завершения функции JavaScript, прежде чем продолжить
Возможно, это не сложный вопрос, но я не уверен, что я на правильном пути.
Моя цель - сначала запустить функцию JavaScript, а когда выполнение будет полностью завершено (это может занять несколько секунд, но не всегда), закрыть окно.
Функция и закрытие запускаются всего 1 кнопкой:
<button id = "myID">Click me</button>
Код JavaScript:
<script type = "text/javascript">
function someFunction() {
// do some stuff
}
document.getElementById('myID').addEventListener("click", function(){
someFunction();
window.close();
});
</script>
Это отлично работает, но может ли кто-нибудь дать совет, является ли это надежным методом или нет? Важно, чтобы выполнение функции было полностью завершено до запуска window.close ().
Если в someFunction нет кода, ожидающего асинхронных результатов, таких как запрос ajax, и вы хотите, чтобы они завершились до закрытия окна, тогда да, остальная часть кода гарантированно выполнится после него.
OP, если вы объясните, что функция на самом деле делает, это а) избавит всех от догадок и б) вы получите лучший ответ.
@Andy someFunction () выполняет некоторые манипуляции с DOM после загрузки страницы. Время выполнения действительно зависит от браузера, скорости процессора и т. д. Здесь нет AJAX.
@ elton73 В этом случае вам нужно спросить себя, делаете ли вы что-нибудь асинхронно или нет. Манипуляции с DOM синхронны.
@vicbyte Синхронный тогда. Мой код здесь должен быть в порядке?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Синхронный javascript всегда будет запускаться в порядке сверху вниз и всегда гарантирует, что первая инструкция будет завершена раньше, чем вторая.
Но есть также асинхронная часть (у вас ее здесь нет, но, например, запросы ajax часто асинхронны), которая выполняется по-другому и требует обратные вызовы / обещания.
Вы можете положить window.close() прямо под alert();. Однако, если вы хотите добавить больше асинхронных элементов, вам нужна функция обратного вызова, подобная этой.
<script type = "text/javascript">
var closeWindow = function() {
window.close();
};
function someFunction(callback) {
alert('hi');
callback();
}
document.getElementById('myID').addEventListener("click", function(){
someFunction(closeWindow);
});
</script>
Зачем ему нужен обратный вызов, если он выполняет только синхронные операции?
Разве не безопаснее использовать функцию обратного вызова, если он хочет добавить асинхронные материалы?
Нет, OP здесь не требует обратного вызова.
В качестве примечания: вместо var closeWindow = function() {} вы должны написать function closeWindow() {}, здесь нет необходимости или преимуществ использования выражения присваивания. Использование выражения указывает на то, что переменной closeWindow может быть назначена другая функция позже или в другом месте.
Правда, однако, я почти поставил () => {}, и мне нравится заставлять их учиться подобию в кодировании.
Использование стрелочной функции только потому, что она нова и короче для написания, вместо ее функций тоже нехорошо. А var closeWindow = () => {} не лучше. Можно спорить о преимуществах const closeWindow =. Мне лично это не нравится, но я вижу в этом преимущества, но назначение var или let для чего-то, что не меняется, - это то, чего вы не должны делать.
Возможны следующие варианты:
- поместите
window.close();в функцию обратного вызова - используйте обещания таким образом, вы можете контролировать выполнение обратного вызова / если есть ошибка, вы можете лучше справиться с ней и не закрывать окно /
someFunction() does some DOM manipulation after a page has loaded
Это синхронно (браузер может отложить рендеринг, но здесь речь идет о миллисекундах), и поэтому гарантируется, что манипуляции с DOM будут выполнены до возврата из функции.
Я полагаю, вы не на самом деле выполняете
alertв этой функции? Но скорее какой-то [асинхронный] ввод-вывод (запрос ajax или еще много чего)?