Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Очередь событий (https://javascript.ru/forum/dom-window/65614-ochered-sobytijj.html)

Alekseyideas 29.10.2016 15:57

Очередь событий
 
Всем привет! Подскажите пожалуйста, как сделать так что бы когда событие пройдет, другое автоматически запускалось? Для примера есть попап, он автоматически появляется и исчезает, после его исчезновения должен через некоторое время появиться следующий попап . Спасибо

ksa 31.10.2016 11:42

Цитата:

Сообщение от Alekseyideas
как сделать так что бы когда событие пройдет, другое автоматически запускалось?

В конце первого запустить второе...

fuckingquest 31.10.2016 18:23

В простом случае можно просто вызывать рекурсивно.
Вот вариант с явной очередью:
<html>
<head>
</head>
<body>
<script>


ModalWindow = {
  layer: document.createElement("div"),
  window: document.createElement("div")
}

with(ModalWindow) {
  with(layer.style){
    position = "fixed"
    width = "100%"
    height = "100%"
    background = "black"
    opacity = "0.5"
    left = "0"
    top = "0"
  }
  with(window.style){
    position = "fixed"
    top = left = "35%"
    background = "white"
    opacity = "1"
    width = height = "30%"
    border = "1px solid black"
    textAlign = "center"
    fontSize = "30px"
  }
}

ModalWindow.createWithMessage = function(message, callback){
  var window = Object.create(this)
  window.message = message
  return window
}


Object.defineProperty(ModalWindow, "show", {get: function(){
   document.body.appendChild(this.layer)
   document.body.appendChild(this.window)
   this.window.innerHTML = this.message
}})

Object.defineProperty(ModalWindow, "hide", {get: function(){
   document.body.removeChild(this.layer)
   document.body.removeChild(this.window)
   this.queue.run
}})

///////////

Queue = {}
Object.defineProperty(Queue, "create", {get: function(){
  var queue = Object.create(this)
  queue.queue = []
  return queue
}})
Queue.append = function(object){
   object.queue = this
   this.queue.unshift(object)
}

Object.defineProperty(Queue, "run",  {get: function(){
   if(this.running) delete this.running.queue
   if(!this.queue.length) return
   this.running = this.queue.pop()
   this.running.queue = this
   this.action(this.running)
 }
})


Object.defineProperty(window, "random", {get: function(){return Math.floor( Math.random() * 3000 + 3000 )}}) 


with( queue = Queue.create ) { 
  append(ModalWindow.createWithMessage("foo"))
  append(ModalWindow.createWithMessage("bar"))
  append(ModalWindow.createWithMessage("baz"))
}

queue.action = function(modalWindow){
 setTimeout(function(){
  modalWindow.show
  setTimeout(function(){modalWindow.hide}, random)
 }, 500)
}

////////

queue.run




</script>
</body>
</html>

Если очередь детерминирована перед началом итераций, вероятно, вместо unshft, выгодней использовать push и reverse после наполнения.
В случае, если к реализации итерируемого объекта нет доступа, можно использовать MutationObserver, и ловить напрямую события перерисовки страницы(события DOM)


Часовой пояс GMT +3, время: 22:53.