Vue中的防抖(最近学的两个知识融合)

防抖

其实简单来说就是，我们防止多次输入，我们使用setTimeout来控制输入，时间到了才读取数据，如果上一次定时器没结束，就归零重新计时

vue- v-model双向绑定input

这个就不得不说MVVM模型了

MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据的展示；
• ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

vue就关键的就是在双向绑定上简化了开发

vue中的防抖

先看看普通的防抖

                debounce:function(fn,delay){
                    var delay=delay||0
                    var timer
                    return function(){
                        var th=this
                        var args=arguments
                        if(timer){
                            clearTimeout(timer)
                        }
                        setTimeout(function(){
                            fn.apply(th,args)
                        },delay)
                }

vue变化

• 第一点，要获取的数据肯定是v-model，data中要保存
• 第二点，就是关键点，这个定时器也要保存下来
• 第三点，延时时间是不用保存的，我们只在函数中用到了，可以使用传参

    <div id="app">
        <input type="text" name="" id="app" v-model="din" @input="change(ajax,1000)">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                din:"",
                timeout:null
            },
            methods:{
                ajax:function(){
                    console.log(this.din);
                },
                change:function(fn,delay){
                    delay=delay||0
                    if(this.timeout){
                        clearTimeout(this.timeout)
                    }
                    this.timeout=setTimeout(()=>{
                        fn.apply(this,arguments)
                    },delay)
                }
            }   
        })
    </script>