vue 系列 实现防抖节流 （防止暴力点击）

可以解决的问题：解决用户快速暴力点击，造成页面跳转或者请求接口等重复的问题。

一【节流】：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。（最常用）

1.在utils中新建一个throttle.js。

function throttle(methods, params) {
	// methods是需要点击后需要执行的函数， info是点击需要传的参数
    // params是执行函数需要传的参数
    let that = this;
    if (that.noClick && methods) {
        that.noClick = false;
        if (params) {
            methods(params);
        } else {
            methods()
        }
        setTimeout(function () {
            that.noClick = true;
        }, 3000)    //三秒内不能再次点击
    } else {
        console.log("重复点击，请稍后再试")
    }
}

//noClick 是点击界面的data中添加的初始化是否可点击的状态

export default { throttle };

2.在入口文件main.js中引入throttle.js。并全局注册。

import throttle from './utils/throttle.js'

Vue.config.productionTip = false
Vue.prototype.$throttle = throttle.throttle;

3.在视图界面使用$throttle处理事件，在methods中正常写方法就行，但需要在事件帮方法的时候用$throttle处理。如：

<button @click="$throttle(moreClike,{type:'click',title:title})">多次点击无效</button>

data() {
	return {
		noClick:true,
        title:'hello zxIt'
    }
},

methods: {
	moreClike(obj){    //因为封装时就是一个参数，所以当存在多个形参的情况，在传入实参时处理成对象即可
		console.log(obj.type);
        console.log(obj.title);
    }
},

二【防抖】：在delay时间内多次触发事件，前面触发的事件方法无效，取最后一次触发的事件方法。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));