javascript - Vue.js: Run a method after a delay, but reset the delay if user input happens - Stack Overflow

admin管理员组

文章数量:1406950

Suppose I have a form that is retrieving and displaying information from an API based on user input. As the user enters their query (for simplicity, let's say they are changing the number of results per page), the ponent should react and load the new data. I want to give the user a buffer zone - let's say, 2 seconds. If they enter their input, and 2 seconds passes without any new input, the ponent will perform an axios request. However, if more input is entered in that time, the 'timeout' will reset back to 2 seconds.

I feel like I would use a watched property to acplish this but am struggling with the implementation. There's the obvious setTimeout method, but that won't allow me to reset the timer - I'd just call it multiple times with a 2 second delay.

How, using Vue.js, can I wait for user input, then wait for 2 seconds of inactivity (on that ponent), then perform an axios request?

Relevant Vue template:

<template>
    <input
        type="number"
        v-model.number="perPage" />    
</template>

Relevant Vue script:

<script>
    export default {
        data: function () {
            return {
                perPage: 25,
            }
        },
        methods: {
            myAxiosCall() {

            }
        }
    }
</script>

Suppose I have a form that is retrieving and displaying information from an API based on user input. As the user enters their query (for simplicity, let's say they are changing the number of results per page), the ponent should react and load the new data. I want to give the user a buffer zone - let's say, 2 seconds. If they enter their input, and 2 seconds passes without any new input, the ponent will perform an axios request. However, if more input is entered in that time, the 'timeout' will reset back to 2 seconds.

I feel like I would use a watched property to acplish this but am struggling with the implementation. There's the obvious setTimeout method, but that won't allow me to reset the timer - I'd just call it multiple times with a 2 second delay.

How, using Vue.js, can I wait for user input, then wait for 2 seconds of inactivity (on that ponent), then perform an axios request?

Relevant Vue template:

<template>
    <input
        type="number"
        v-model.number="perPage" />    
</template>

Relevant Vue script:

<script>
    export default {
        data: function () {
            return {
                perPage: 25,
            }
        },
        methods: {
            myAxiosCall() {

            }
        }
    }
</script>

• javascript
• node.js
• typescript
• vue.js

Share Follow edited Dec 21, 2024 at 10:40 Mayank Kumar Chaudhari 18.9k1313 gold badges7272 silver badges155155 bronze badges asked Oct 24, 2018 at 2:25 CGriffinCGriffin 1,4761515 silver badges4141 bronze badges 4

• 1 You might want to look into debouncing. There's a good example in the docs – Husam Elbashir Commented Oct 24, 2018 at 2:30
• I did find that - but it looks as though it adds a time out between requests, so the first request would run instantly, then a 2 second delay between subsequent requests. Would debouncing allow me to add a delay to the very first one? (I'll admit this is me being a bit of a perfectionist at this point) – CGriffin Commented Oct 24, 2018 at 2:32
• 1 Yes it will, I just didn't read the docs correctly. Awesome! – CGriffin Commented Oct 24, 2018 at 2:35
• I think Lodash's debounce function won't immediately invoke a function unless you specifically set the leading option to true. – Husam Elbashir Commented Oct 24, 2018 at 2:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As you pointed out you are using setTimeout() method.

Solution 1 -- Do this inside your text watcher

save the result of setTimeout in a variable and use clearTimeout when you need to cancel. like this

let x = setTimeout(functionName, time);
//to clear -- when user starts typing clear the previously created timeouts
clearTimeout(x);

Solution 2

Use debounce (import lodash). I find first one better. There may be many more approaches. Accept the answer if it helps.

本文标签：