1

I'm using a library that uses ajax to retrieve content for my website. The library provides listeners for when the content will be loaded and when it has finished loading.

My code is along the lines of:

document.addEventListener('turbolinks:click', function(e) {
  // Possibly does some loading or animations...
}

document.addEventListener('turbolinks:load', function(e) {
  // Code here should start running after code in 'turbolinks:click' is finished.
}

What I'm looking to achieve is that the code in the callback of turbolinks:load should only run after the code in turbolinks:click has finished whatever it is doing.

So for example turbolinks:click triggers an animation that takes three seconds to load. If the turbolinks:load event triggers in those three seconds it should wait until the three seconds have passed, if it triggers after that time it can run instantly.

I hope that makes sense and someone can guide me in the right direction, thanks! :)

Lille Hummer
  • 609
  • 7
  • 16
  • 1
    both fn. are event triggered and not dependant on each other. so why would one want one to depend on the other? – binariedMe May 07 '17 at 10:35
  • A simple example would be: 'click' fades out the webpage using a CSS animation, 'load' fades it back in. 'load' can trigger before the CSS animation from 'click' has finished though and I don't want it to fade back in before it has completely faded out first. – Lille Hummer May 07 '17 at 10:38
  • so, what will trigger the second fn (load)? – binariedMe May 07 '17 at 10:39
  • Just use variable. At start first function's changing variable ``lock = 1``, at the end it's changing to ``lock = 0``. Second function should check ``lock`` and wait if ``lock == 1``. Simple solution, but can work (i don't know whole situation ;) ). – Sylogista May 07 '17 at 10:39
  • @Sylogista you can't wait in javascript as its single threaded. – binariedMe May 07 '17 at 10:41
  • @binariedMe that doesn't mean you can't block. – Aluan Haddad May 07 '17 at 10:41
  • @binariedMe But I can ``setTimeout``. That's enough. – Sylogista May 07 '17 at 10:42
  • You will never be able to come of while check loop. So its like either lock is 0 and load never happens or lock is 1 and load happens. You wont' be able to wait for lock to become 1 and then run load – binariedMe May 07 '17 at 10:43
  • @Sylogista setInterval to be precise but that would render to be very much inefficient code – binariedMe May 07 '17 at 10:43
  • @binariedMe setInterval would make it inefficient because I'll make second lock. That's why I'm talking about setTimeout. (And I don't saying that is efficient. But can be enough.) – Sylogista May 07 '17 at 10:53
  • @binariedMe I was talking about something like in [first codeblock](http://stackoverflow.com/a/21524239/6557808) – Sylogista May 07 '17 at 10:55
  • @Sylogista Understood and agreed. The sample provided is one way of using setTimeout as setInterval. What I am trying to understand here is why to make two events dependant and if so, how can we justify event driven callbacks. – binariedMe May 07 '17 at 10:58
  • Thanks for your comments all. I found a way to solve it using Promises, I'll see if I can answer my own question later on. – Lille Hummer May 07 '17 at 16:58

0 Answers0