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