Murphy

vue之放抖动与节流

电脑版发表于:2020/3/17 18:04

模拟需求:在input输入框中输入账号,求情接口,返回所有账号中包含的数据,不需要点击按钮

我们大概看一下原型图

需求分析

1、没有button,那么我们需要监听文本框的输入时间,判断值改变后去请求后台,将数据返回显示。

2、文本框清空后数据清零。

没错,大概就这两个,而且基本上没有难度。

老样子,先把基础的代码写好,如同那些下象棋的人一样,开始几步的套路都是一样的,不用思考。

<!-- html代码 -->
<el-input placeholder="搜索" v-model="undefined" clearable size="mini">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

<ul>
    <li v-for="item in resultList">
    <!-- 具体显示效果... -->
    </li>
</ul>

<!-- js代码 -->
<script>
    var app;
    var vm = new Vue({
        el: '#app',
        data: function () {
            app = this;
            return {
                search: undefined,  //搜索值
                resultList:[]       //返回结果
            }
        },
        mounted: {

        }
    });
</script>

ok,基本的已经完成了,既然是请求数据,那么肯定有一个请求接口的方法

mounted: {
    getData() {
        axios.post(url,{
            参数1:值1,
            ...
        }).then(function (response) {
            //符合你结构的判断,我这里简单处理,直接赋值
            app.resultList= response.data.data;
        }).catch(function (error) {
            console.log(error);
        });
    }
}

那么现在第一个问题来了,我该怎么去调用这个方法,没有按钮可以点击,如何出发事件?既然用的vue,那么vue中的侦听器侦听器大家或许用过,

那就是:watch,具体的理论知识我就不说了,可以去看文档(其实我也不清楚)。

var vm = new Vue({
        el: '#app',
        data: function () {
            app = this;
            return {
                search: undefined,  //搜索值
                resultList:[]       //返回结果
            }
        },
        mounted: {
            getData() {
                axios.post(url,{
                    参数1:值1,
                    ...
                }).then(function (response) {
                    //符合你结构的判断,我这里简单处理,直接赋值
                    app.resultList= response.data.data;
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        watch: {
            'search': function (value) {
                if (!value) {
                    //当值为空时
                    app.resultList=[];
                } else {
                    //请求接口,这里的app 是之前定义的,至于为什么要这样定义,是因为存在js闭包问题
                    app.getData();
                    //检查请求次数
                    console.log('请求后台')
                };
            }
        }
    });

好,搞了半天似乎和标题并没有任何关系。。。

下面进入正题,我们先看下这样写行不行。

可以看到,当我输入“17608”的时候,其实是求情了5次的,这么频繁的请求不说大家也懂,资源浪费嘛,试想一下,当数据量非常大的时候,这样写的话,嘿嘿嘿

好,然后你去和产品经理沟通,说了一推资源浪费等等的话,完全不鸟你,我就要这个亚子...(脑补中)

办法总比困难多,我们可以想一下在用户输入完条件后再去查找,在这个值没有变化的时候我们就可以去请求了。

watch: {
            'search': function (value) {
                if (!value) {
                    //当值为空时
                    app.resultList=[];se
                } else {
                    setTimeout(() => {
                        app.getData();
                        console.log('请求后台')
                    }, 1000);
                };
            }
        }

这样一看就不行,都不用运行,结果和上面并没有什么区别,我也就不分析了,我们来修改一下

     'search': function (value) {
          let timeout;
          //当值变化的时候清除定时器
          clearTimeout(timeout);
          if (!value) {
            //当值为空时
            app.resultList=[];
          } else {
            timeout= setTimeout(() => {
                  app.getData();
                  console.log('请求后台')
                 }, 1000);
          };
         }

没错,只要侦听到值在变化,我就把上一次的清除掉,想法是对的,但是还有问题,timeout的作用域问题,每进来一次,就会重新申明一次,所以你根本就清除不了。

el:'#app',
    data: function(){
          app = this;
     return {
         search: undefined,  //搜索值
       resultList: [],       //返回结果
       timeout: undefined  //防抖动 定时器变量
         }
     },

我们在这里定义,每次作用到的都是一个变量上

'search': function (value) {
                //当值变化的时候清除定时器
                clearTimeout(app.timeout);
                if (!value) {
                    //当值为空时
                    app.resultList=[];
                } else {
                    app.timeout= setTimeout(() => {
                        app.getData();
                        console.log('请求后台')
                    }, 1000);
                };
            }

ok,这样就完成了,先清除上一次的,在去重新请求。你要是问我怎么就知道要把之间间隔设成一秒,万一我就要两秒输入一个字符呢,大哥,要不要让你的手机壳

跟着你的心情变色啊

这个是就防抖动,节流与这个在我看来大同小异,他是根据时间的变化来判断,用户在多少多少秒之内输入去请求一次,聪明的人一说就懂。

代码格式不晓得咋回事,突然就乱了,我也懒得调了。。。。

最后放一波效果图



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢