vue中通过节流操作，模拟实现王者英雄技能CD的冷却效果。

节流概念：控制，当出现多个请求时，让触发函数在 n 秒内只触发一次，当上次触发事件结束后，才能进行新一次触发。同时节流会稀释函数的执行频率。

博主通过在vue项目实例中，通过下面案例《方便大家更好的理解节流的概念，以及执行需求》，

<template>
    <div class="sk">     //此处博主，就通过3个div，代替3个技能按钮，，不要在意细节哈，（哈哈，皮一下）
        <div @click="skill1ick">{{ skill1 }}</div>  //技能按钮1
        <div @click="skill2ick">{{ skill2 }}</div>  //技能按钮2
        <div @click="skill3ick">{{ skill3 }}</div>  //技能按钮3
    </div>
</template>

<script>
export default {
    data() {
        return {
            //技能名称
            skill1: "一技能",
            skill2: "二技能",
            skill3: "大招",
            sk1: true,  //操作状态
            sk2: true,
            sk3: true,
            //冷却时间
            num1: 15000,    
            num2: 20000,
            num3: 10000,
        }
    },
    methods: {
        skill1ick() {   //触发一技能
            let dath = this;
            if (dath.sk1) {  //判断操作状态《当前是否已经处于冷却中》
                this.$message({
                    message: '释放一技能',
                    type: 'success'
                });
                let name = dath.num1 / 1000;   //冷却时间换算
                let data = setInterval(() => {   //冷却倒计时
                    name = name - 1;
                    dath.skill1 = name + "秒";
                }, 1000)
                dath.sk1 = !dath.sk1;    //变更操作状态
                setTimeout(() => {     //冷却锁定中。
                    clearInterval(data);;  //停止倒计时
                    dath.skill1 = dath.$options.data().skill1;
                    dath.num1 = dath.$options.data().num1;
                    dath.sk1 = dath.$options.data().sk1;    //解除冷却
                }, dath.num1)
            } else {
                this.$message({
                    message: '一技能cd冷却中',
                    type: 'warning'
                });
            }
        },
        skill2ick() {  //二技能
            let dath = this;
            if (dath.sk2) {
                this.$message({
                    message: '释放二技能',
                    type: 'success'
                });
                let name = dath.num2 / 1000;
                let data = setInterval(() => {
                    name = name - 1;
                    dath.skill2 = name + "秒";
                }, 1000)
                dath.sk2 = !dath.sk2;
                setTimeout(() => {
                    clearInterval(data);
                    dath.skill2 = dath.$options.data().skill2;
                    dath.num2 = dath.$options.data().num2;
                    dath.sk2 = dath.$options.data().sk2;
                }, dath.num2)
            } else {
                this.$message({
                    message: '二技能cd冷却中',
                    type: 'warning'
                });
            }
        },
        skill3ick() {   //大招
            let dath = this;
            if (dath.sk3) {
                this.$message({
                    message: '释放大招',
                    type: 'success'
                });
                dath.sk3 = !dath.sk3;
                let name = dath.num3 / 1000;
                let data = setInterval(() => {
                    name = name - 1;
                    dath.skill3 = name + "秒";
                }, 1000)
                setTimeout(() => {
                    clearInterval(data);
                    dath.skill3 = dath.$options.data().skill3;
                    dath.num3 = dath.$options.data().num3;
                    dath.sk3 = dath.$options.data().sk3;
                }, dath.num3)
            } else {
                this.$message({
                    message: '大招cd冷却中',
                    type: 'warning'
                });
            }
        }
}
</script>