requestAnimationFrame
- асинхронен и работает условно как setTimeout
только вызов колбэка будет перед следующим тиком отрисовки, а не через промежуток времени. Это логично и правильно. requestAnimationFrame
была бы синхронной, то рекурсивный вызов превёл бы только к переполнению стека и падению, f никогда бы не "завершила работу", т.к. отрисовка экрана никогда не прекращается. data() {
return {
isDropped: true,
style: {
height: 'auto'
}
}
},
mounted() {
this.style.height = this.isDropped ? this.$el.firstElementChild.scrollHeight + "px" : 0
}
Вместо this.$el.firstElementChild
для надёжности лучше использовать this.$refs.some
с проставлением соответствующего ref="some"
в шаблоне.<script>
стоит в теле html выше чем <div class="mystyle">
то он выпонится раньше чем <div class="mystyle">
вообще появится и, само собой, оного не найдёт. Код решения откладывает выпонение до загрузки страницы: onload
- вместе с картинками и прочим медиа, DOMContentLoaded
только html кода. Откладывать таким образом код удобно, но можно просто поместить <script>
после <div class="mystyle">
и тогда тоже всё будет работать.function waitFunction(delay) {
return function(result) {
return new Promise(resolve => setTimeout(resolve, delay, result)));
}
}
function waitPromise(delay) {
return new Promise(resolve => setTimeout(resolve, delay)));
}
function wait(delay) {
return function(result) {
return new Promise(resolve => setTimeout(resolve, delay, result)));
}
}
При вызове создаёт новую функцию, которая создаёт промис с таймаутом:function(result) {
return new Promise(resolve => setTimeout(resolve, delay, result)));
}
замыкая значение delay,.then(wait(2000))
.then(function(result) {
return new Promise(resolve => setTimeout(resolve, 2000, result)));
})
fn.then = resolve => fn().then(resolve);
, добавляет взвращаемой функции собственный метод then
, который на самом деле просто вызывает саму эту возвращаемую функцию. Это нужно, чтобы можно было делать так:wait(2000).then(...)
.then(data => {
return wait(2000)
})