Reasons and solutions for uniapp to jump twice with quick clicks

With the popularity of mobile Internet, more and more companies choose to use uniapp to develop mobile applications. However, uniapp may encounter a common problem during development: clicking to jump twice quickly. This article will introduce you to the cause and solution of this problem.

Cause of the problem

The problem of clicking the jump twice quickly is usually because there is a delay when clicking the button, but during this period the user quickly clicks the button again, resulting in An exception occurred in the program, and the click event was actually triggered twice.

Refer to the following code example:

<template>
  <button class="btn" @click="goPage">跳转到下一页</button>
</template>
<script>
  export default {
    methods: {
        goPage() {
            uni.navigateTo({
                url: '/pages/home/index'
            })
        }
    }
 }
</script>

When the user quickly clicks the button, if the button is clicked again before the first clicked event is executed, the event will be triggered again, thus Cause exception.

Solution

1. Use the locking mechanism

The principle of the locking mechanism is to lock every time an event is triggered, wait for the current event to be processed, and then unlock . During processing, the event cannot be triggered again. Therefore, this can effectively prevent the abnormal execution of events caused by users' quick clicks.

Refer to the following code implementation:

<template>
  <button class="btn" @click="goPage">跳转到下一页</button>
</template>
<script>
  export default {
    data() {
      return {
        locked: false
      }
    },
    methods: {
        goPage() {
            if(this.locked) {
              // 已经被锁定了，不能再次执行事件
              return
            }
            this.locked = true

            uni.navigateTo({
                url: '/pages/home/index'
            })

            // 在事件处理完后才解锁
            let _this = this
            setTimeout(() => {
              _this.locked = false
            },　500)
        }
    }
 }
</script>

In the above example, we added the locked variable in data and part of the code in the goPage method to lock it before execution, and Unlocked after processing is complete. Although this method can solve the problem of quick clicks, the waiting delay time is relatively long, which may affect the experience.

2. Use the Debounce (anti-shake) algorithm

The principle of the anti-shake algorithm is that when an event is triggered, it is delayed for a period of time before processing. If the event is triggered again during the period, The timer is restarted, and if it is not triggered again, event processing is performed.

Refer to the following code implementation:

<template>
  <button class="btn" @click="goPage">跳转到下一页</button>
</template>
<script>
  export default {
    data() {
      return {
        debounceId: null
      }
    },
    methods: {
        goPage() {
            if(this.debounceId) {
                // 如果正在等待响应，则取消掉
                clearTimeout(this.debounceId)
            }

            this.debounceId = setTimeout(() => {
                uni.navigateTo({
                    url: '/pages/home/index'
                })
            },　500)
        }
    }
 }
</script>

In the above example, we added the debounceId variable in data and added code in the goPage method to delay it for a period of time before processing. , if the event is triggered again during the period, the time will be restarted. Although this method will not have a big impact on the user experience, an appropriate delay time needs to be set, and improper design may lead to abnormal event processing.

Summary

The problem of clicking to jump twice quickly is a common abnormal situation in the uniapp development process, which can be solved by using locking mechanism or anti-shake algorithm. Each method has its advantages, disadvantages and applicable scenarios. Developers need to comprehensively consider the actual situation and choose the most appropriate solution.

The above is the detailed content of Reasons and solutions for uniapp to jump twice with quick clicks. For more information, please follow other related articles on the PHP Chinese website!