2020-07-26节流防抖

1、防抖

简述：防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

实现

/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func,wait,immediate) {
 let timeout;

 return function () {
     let context = this;
     let args = arguments;

     if (timeout) clearTimeout(timeout);
     if (immediate) {
         var callNow = !timeout;
         timeout = setTimeout(() => {
             timeout = null;
         }, wait)
         if (callNow) func.apply(context, args)
     }
     else {
         timeout = setTimeout(function(){
             func.apply(context, args)
         }, wait);
     }
 }
}

应用场景： search搜索联想，用户在不断输入值时，用防抖来节约请求资源。 window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

demo1

组件

        <van-search
          @input="debounce()"
          @clear="getList(true)"
          v-model="queryParam.keywords"
          placeholder="请输入症状、病种名称"
        />
        data(){
          return{
             debounce: this.util.debounce(() => {
             this.getList(true);
        }, 150)
    }
}

utils

    debounce(fun, delay) {
        //return上面的代码只有第一次调用防抖函数的时候
       //才会执行打印出来（在组件初始化的时候已经执行，
      //因为是放在data里面的，此时也把return下面的函数return出来了，
     //当输入内容的时候调用的是return出来的函数，所以return上面的代码是不 
     //会执行的自然也就不会打印出来了。
        console.log(this)//这里的this指向utis,
        return function(args) {
            let that = this;这里的this一直指向vue实例,
            let _args = args;
            clearTimeout(fun.id);
            fun.id = setTimeout(function() {
                fun.call(that, _args);
            }, delay);
        };
    },

2、节流

简述：节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

实现

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

应用场景鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件，比如是否滑到底部自动加载更多，用节流来判断

3、基于vue展开收起动画

<!--css-->
.box{
    height:200px;width: 200px;
    background-color:black;
}
.draw-enter-active, .draw-leave-active {
    transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
}

<div id="app">
    <button @click="boxshow = !boxshow">点击展开/关闭</button>
    <transition name="draw">   <!--这里的name 和 css 类名第一个字段要一样-->
        <div class="box"  v-show="boxshow"></div>
    </transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            boxshow:false
        },
    });
</script