3

i'm doing a shopping cart in vue but i'm having some issues. having never used the library i'm probably doing basics wrong, but:

when I add something to the cart I have an onclick function, expander(item) which looks like this:

this.addToCart(item);
this.show = true;           
clearTimeout(this.timer);
timer: setTimeout(()=>{ this.show = false; }, 3000);

so what it does it adds to cart, sets the visibility of the cart div to true, then after a delay of three seconds it sets the cart div back to false.

the thing is, the clearTimeout(this.timer) doesn't work. so for each click, after three seconds, no matter what I do it sets the visibility back to false. what I'm trying to do with this function is to reset the timer each time and after reading up it seems like I'm doing it the correct way.

so, I'm guessing my problem is that i need to declare the variable timer: setTimeout(()=>{ this.show = false; }, 3000); outside of the function, in order for clearTimeout() to find it at the beginning of my function. my problem here is that wherever I declare it, it can't seem to find it. I've tried declaring the variable in my data {} and also outside of the Vue instance but it doesn't seem to want to find it in my functions.

so: how do I declare the variable? is that even my problem? is there may be an easier fix for this than what it's trying to do?

thanks!

Improve this question
1
  • Can you create a fiddle. Commented Mar 13, 2017 at 8:31

3 Answers 3

Reset to default
6

In the quoted code, this line:

timer: setTimeout(()=>{ this.show = false; }, 3000);

defines a labelled statement, and doesn't save the timer handle anywhere. To save it to this.timer, you'd use an assignment:

this.timer = setTimeout(()=>{ this.show = false; }, 3000);

(The timer: thing would assign to a property within an object initializer [{ ... }], but not outside of one.)

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

thank you. it works for all of my different functions now! although -- my last little hiccup is that i want to clearTimeout(this.timer) when i mouseover the div, in order to keep the cart visible while mousing over. i have a v-on:mouseleave="addTimeout()" which works -- it's a function which adds a timeout. but my v-on:mouseover="clearTimeout(this.timer)" doesn't seem t o want to work at all. is this a problem because it's not a global variable, or what am i missing? i've been reading up on documentation but i can't find my issue there...
@akre_11: I'm afraid I don't know Vue. I suspect the problem is that this doesn't refer to what you're expecting it to refer to there, but beyond that I'm afraid I can't help with this follow-on question.
all right! thanks a lot for the help though, it put me in the right direction. i'll keep troubleshooting this!
1
  • wait 1 second between keypress,
  • if user keypress, clear setTimeout and renew setTimeout with more 1 second
  • after 1 second user dont keypress the before setTimeout expire and call another function(method in VueJs)
  • List item

I used this solution, it's verify if user end the word before call api:

data: {
    search: '',
    time:null,
    },
watch: {
    search: function (search) {
        var self = this;
        console.log('Search keypress: ' + search);
        if (search.length >= 3) {
            if (this.time) {
                clearTimeout(this.time);
            }
            this.time = setTimeout( () => this.searchOnline(search), 1000);
            console.log('Search online or wait user finish word?');
        }
    },
},
methods:{
    searchOnline: function(search){
        console.log('Start search online: ' + search);
        // axios call api search endpoint
        console.log('Serch online finished!');
    },
}
Improve this answer

1 Comment

Somehow this is not clearing the timers for me. Are you sure clearTimeout works when addressing a local variable like this?
1
  • setTimeout generates an id
  • capture this id in a variable
  • pass this variable to clearTimeout

as per MDN: The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

In Vuejs the following steps work for me.

data: {
myToid:null,
}, ....

methods: {
 myTofunction: function(){
    clearTimeout(this.myToid);
    this.myToid = setTimeout(() => {
        ...my function code...;
    }, 6000);
 }
}

Whenever I call myTofunction, it first clears any existing setTimeout id (stored in myToid) and then sets a new id.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.