防抖&节流

防抖

1、简单版本

   add() {
       if (this.timer) {
           clearTimeout(this.timer)
       }
       this.timer = setTimeout(() => {
           // 具体的业务代码
       }, 500) // 假设防抖间隔是500ms
   }

2、只在当前组件使用

// 延迟
    function debounce(fn, time) {
        let _arguments = arguments
        let timeout = null
        return function() {
            if (timeout) {
                clearTimeout(timeout)
            }
            timeout = setTimeout(() => {
                fn.call(this, _arguments)
            }, time);
        }
    }

使用

add:debounce(function(){
    this.num++;
},1000)
//函数只能使用声明式，且不能用箭头函数
//如下不会执行
// add(){
//  debounce(()=>{
//      this.num++;
//  })
// },

3、最终版

let timeout = null;

/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
export const debounce=(func, wait = 500, immediate = true)=> {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout);
    // 立即执行，此类情况一般用不到
    if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(function() {
            timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func();
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() {
            typeof func === 'function' && func();
        }, wait);
    }
}

调用

import {debounce} from "./out.js"
add(){
    debounce(()=>{
    this.num++;
    })
}
//如果把箭头函数改为function,则this不再指向vue实例

四个方法 结果是？，为什么？？

<template>
    <view class="content">
        <button type="default" @tap="add()">点击我{{num}}</button>
    </view>
</template>

<script>
    // 延迟
    function debounce(fn, time) {
        let _arguments = arguments
        let timeout = null
        return function() {
            if (timeout) {
                clearTimeout(timeout)
            }
            timeout = setTimeout(() => {
                fn.call(this, _arguments)
            }, time);
        }
    }
    export default {
        data() {
            return {
                num: 0
            }
        },
        methods: {
            add:debounce(function(){
                console.log(this)
                this.num++;
            },1000),
            add:debounce(() => {
                console.log(this)
                this.num++;
            }),
            add(){
                debounce(()=>{
                    console.log(this)
                    this.num++;
                })
            },
            add(){
                debounce(function(){
                    console.log(this)
                    this.num++;
                })
            }
        }
    }
</script>

节流

          @input="checkinput"

 //输入的时候验证
            //后台数据库设置字段唯一
            checkinput(value) {
                if (this.istime) {
                    clearTimeout(this.istime);
                }
                this.istime = setTimeout(() => {
                    islogin({key: 'username', value}).then(res => {
                        if (res.data.code === 200) {
                            this.iserror = true;
                        } else {
                            this.iserror = false;
                        }
                    })
                }, 1000);
            },