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

    在输入框输入时,要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;
    节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。

    节流

    节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数:
    data() {
          return {
                timer: null,
                input: null, // 页面绑定的值
          }    
    }
    methods: {
          throttle() {
            clearTimeout(timer)
            this.timer = setTimeout(() => {
              // 发请求到后台
              console.log(this.input);
            }, 500)
          } 
    }
    
    

    防抖

    防抖的实现思路:每次触发事件时都取消之前的延时调用方法:
    data() {
          return {
                flag: false,
                input: null, // 页面绑定的值
          }    
    }
    methods: {
          debounce() {
            if (this.flag) {
              return false
            }
            this.flag = true
            setTimeout(() => {
              // 发请求到后台
              console.log(this.input);
              this.flag = false
            }, 500)
          }   
    }
    
    
  • 相关阅读:
    WebUploader IE9下报错
    raphael 支持group(简)
    SVG image xlink:href 设置失败
    活动倒计时代码(精确到毫秒)jquery插件
    PHP连续签到
    PHP判断是否微新浏览器
    php中文匹配
    PHP+mysql统计排名第几位
    php随机抽奖实例分析
    类似a:hover的伪类的注解
  • 原文地址:https://www.cnblogs.com/AdolphWilliam/p/13633190.html
Copyright © 2011-2022 走看看