zoukankan      html  css  js  c++  java
  • 防抖和节流

    1. 防抖 只执行最后一次操作,类似于回城操作,是可以自己打断的,比如说回家过程中缺钱买装备,再来补一波兵;

      使用场景: input框输入内容进行自动搜索,应该等输入结束之后在进行;页面的滚动操作等;

      vue案例: 稍后补充

    2. 节流 只执行第一次操作,类似于技能冷却,放了技能就要等cd结束以后才可以进行下一次操作;

      使用场景: 上拉加载下拉刷新等post请求;

      vue案例:采用了mixins混入的方法,先定义mixin文件,内容如下:

      

    export default {
      data () {
        return {
          isThrottle: true
        }
      },
      methods: {
        throttle(time = 2000) {
          return new Promise((resolve) => {
            if (!this.isThrottle) return
            resolve()
            this.isThrottle = false
            setTimeout(() => {
              this.isThrottle = true
            }, time)
          })
        }
      }
    }

      引用和调用如下

     

    import Minxin from "../../../src/config/mixin.js";
    export default {
        mixins: [Minxin],
        methods: {
           submit() {
               this.throttle().then(() => {
                   // 执行请求
               })
            }    
        }    
    }
  • 相关阅读:
    20180530
    vue路由配置出错,导致页面跳转会有闪屏问题
    20180528
    vuecli+ivew项目搭建
    centos6安装mysql
    华为云服务ESC
    centos6安装nginx
    国产操作系统aarch64编译filebeat
    Python常见问题
    Git
  • 原文地址:https://www.cnblogs.com/guozongzhang/p/13305505.html
Copyright © 2011-2022 走看看