zoukankan      html  css  js  c++  java
  • Vue实现节流,防止重复提交

    1、在methods中定义节流函数:

    /**
    * @desc 函数节流,规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。
    * @param func 函数
    * @param wait 延迟执行毫秒数
    */
    throttle (func, wait) {
      let timeout = null
      return function () {
          const context = this
          const args = arguments
          if (!timeout) {
              timeout = setTimeout(() => {
                  timeout = null
                  func.apply(context, args)
              }, wait)
          }
      }
    }

    2、在data中定义绑定需要节流的函数:

    data () {
      this.handleSubmit = this.throttle(this.handleSubmit, 1000)
      return {
      }
    },
    methods: {
      handleSubmit() {
        console.log('handleSubmit')
      },
      /**
      * @desc 函数节流,规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。
      * @param func 函数
      * @param wait 延迟执行毫秒数
      */
      throttle (func, wait) {
        let timeout = null
        return function () {
            const context = this
            const args = arguments
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null
                    func.apply(context, args)
                }, wait)
            }
        }
      }
    }
     
    嘴角上扬,记得微笑
  • 相关阅读:
    Android带头像的用户注册页面
    Android——四种AterDialog
    Android Studio如何显示行号
    月下载量上千次的APP源码分享
    Android——列表视图(ListView)
    Android——列表选择框(Spinner)
    Android——按钮的事件监听
    ACM——第几天
    Android——控制UI界面
    Android——将图片加入到系统相册里面
  • 原文地址:https://www.cnblogs.com/jardeng/p/13750928.html
Copyright © 2011-2022 走看看