zoukankan      html  css  js  c++  java
  • vue 中防抖

    比如扫码枪,扫码的时候,如果输入框监听input事件,就有可能会多次触发回调。
    支付按钮,如果点击过快,也可能多次触发支付回调。
    这就需要前端做防抖处理了。

    vue执行防抖函数

    在vue中,大家写函数,一般是这样的。如下:

    methods: {
      handleScanDataChange() {
        _debounce(function() {
            console.log(this.searchValue);
        })();
      }
    }
    

    但是防抖函数也这样写,是错误的。

    正确写法:

      handleScanDataChange: _debounce(function() {
        console.log(this.searchValue);
      }, 300),
    

    给按钮添加自定义指令防抖

    //log为传入的函数名
    <button v-btnDebounce="test">节流按钮</button>
    
    directives: {
      //防抖函数指令
      btnDebounce: {
        inserted: function(el, binding) {
          let timer;
          el.addEventListener("click", () => {
            if (timer) {
              clearTimeout(timer);
            }
            timer = setTimeout(() => {
              // 关键点: vue的自定义指令传递的参数binding如果是一个函数,则通过      
              // binding.value()来执行,通过上述示例,还可以传递比如事件,绑定对象之类的
              binding.value();
            }, 1000);
          });
        }
      }
    },
    methods: {
      test() {
        console.log(123);
      }
    } 
    
  • 相关阅读:
    年度回忆录(?——2011.01)
    我在学英语
    技能冷却
    抗锯齿
    在cocos2dx 2.x FPS 等参数
    手指效果
    cocos2dx 简单OpenGL 画图
    cocos2dx tile map瓦片地图的黑线及地图抖动解决方案
    C++操作SQLite数据库
    精灵点击移动
  • 原文地址:https://www.cnblogs.com/sspeng/p/15321187.html
Copyright © 2011-2022 走看看