FerchoCarcho FerchoCarcho - 2 years ago 189
Javascript Question

Wait at least 2 seconds if ajax completed before transition.next() with Vue.js

I need to display the spinner for at least 2 seconds if ajax has been completed
before transitioning.

I have the following but isnt working

route: {
data(transition) {


.then(sliders =>{this.sliders = sliders.data

.then(posts =>{this.posts = posts.data.data

function timer() {
var dfd = $.Deferred();
}, 2000,dfd.resolve);
return dfd.promise();
$.when( this.getPosts(), this.getSliders(),timer() )

I tried to implement the code reading this post
But the $.when function isnt waiting until the setTimeout function is finished executing.

Answer Source

I believe the problem is caused because your methods - getSliders() and getPosts() are not returning any Promises. So your deferred timer has no way of knowing what is going on in these get methods.

Your this.$http.get(..) from Vue-resource returns a promise. You can return it as follows:

    // Fetch sliders and "return" the promise object
    return this.$http.get('/api/sliders/getsliders')
        .then(sliders =>{
            // The data on vue is already being set here. So it will not wait for timeout.
            this.sliders = sliders.data
            // Instead you may try to set it on "this.sliders_temp" and then change later to "this.sliders"
}, // and so on...

That follows the example given here: http://www.erichynds.com/blog/using-deferreds-in-jquery, which is linked in the other stackoverflow answer that you referred to in the question. They return $.get(..) in their functions.

But as indicated in my code sample above, even if you return this.$http.get(...), it will still not work for you, because you are already setting this.sliders inside your success handler for $http. So your Vue template will update the UI immediately. You need to think through a better strategy for your app.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download