How to prevent unwanted clicks if someone clicks too fast?

Question

I have a sidebar with moveable panels - you can see in the snippet they move left or right when you click Menu item or Go back.

The problem is that if you click fast on the buttons (You can recreate the issue by clicking fast and many times on the buttons), it will sometimes calculate currentIndex++ (or --) twice on the same panel which will make it stuck, and then it will just keep adding translate amount to the same panel.

In my example there are only 3 panels with width 40, so it should only move somewhere between translate-x-0 to -translate-x-120, but if it gets stuck, it will simply keep adding jumps of 40 to the stuck panels, so you can see something like -translate-x-800 if you just keep clicking

const App = {
    data() {
        return {
                sidebarWidth: 40,
                currentIndex: 0,      
       }
    },
    computed: {
            position() {
                if (this.currentIndex === 0) {
            return 'translate-x-0'
        } else {
                  return `-translate-x-${this.sidebarWidth * this.currentIndex}`
        }
            }
        }
}

Vue.createApp(App).mount('#app')

user_6277151 · Answer

The problem is the index increment/decrement is not limited/truncated, so it's possible to exceed the actual number of menus even if using a debouncer.

Determine the menu count by querying .sidebar-menu elements in the component, and prevent the index from exceeding this maximum value:

export default {
    mounted() {
        this.menuCount = this.$el.querySelectorAll('.sidebar-menu').length
    },
    methods: {
        nextIndex(delta) {
           this.currentIndex = (this.currentIndex + delta) % this.menuCount
        }
    }
}

Then bind that method to the click-handlers:

const App = {
    data() {
        return {
                sidebarWidth: 40,
                currentIndex: 0,
                menuCount: 0,
       }
    },
    computed: {
       position() {
           if (this.currentIndex === 0) {
               return 'translate-x-0'
           } else {
              return `-translate-x-${this.sidebarWidth * this.currentIndex}`
           }
       }
    },
    mounted() {
        this.menuCount = this.$el.querySelectorAll('.sidebar-menu').length
    },
    methods: {
        nextIndex(delta) {
           this.currentIndex = (this.currentIndex + delta) % this.menuCount
        }
    }
}

Vue.createApp(App).mount('#app')

user_2942015 · Answer

Here is an example using debounce from lodash. It works by aggregating repeated events and only firing the last one. You can run the example to see how it works.

const App = {
    data() {
        return {
                sidebarWidth: 40,
                currentIndex: 0,      
       }
    },
    methods: {
      debounceInput: _.debounce(function (e) {
        // decides whether to increment or decrement current Index
        if (e == "+"){
          this.currentIndex++
        }
        else if (e == '-') {
          this.currentIndex--
        }
      }, 300)
    }
    ,
    computed: {
            position() {
                if (this.currentIndex === 0) {
            return 'translate-x-0'
        } else {
                  return `-translate-x-${this.sidebarWidth * this.currentIndex}`
        }
            }
        }
}

Vue.createApp(App).mount('#app')

How to prevent unwanted clicks if someone clicks too fast?

2 Answers