回调函数传参与防抖动处理 《二》

上一篇讲了回调函数，现在谈谈防抖动处理

思路

    1：当点击按钮的时候，用转圈的方式来显示，并且此时不能够再次点击，这种方式交互性比较好，个人还是比较推荐的，实现方式也很简单，网络上很多，就不赘述了

    2：

    3：当点击的时候，某一时间段内多次点击，只有一次生效。这种就是我在这个项目中所用到的方式，具体实现方式如下

           1：创建一个js文件，写一个防抖动处理的函数

let timeout;
let wait=1000;
let immediate = false;
// export function Debounce(func, wait=1000, immediate = false) {
export function Debounce(func, ...arges) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);

    // 立即执行，此类情况一般用不到
    if (immediate) {
        var callNow = !timeout;

        timeout = setTimeout(function() {
        timeout = null;

        }, wait);
        if (callNow) typeof func === 'function' && func(...arges);
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() {
        typeof func === 'function' && func(...arges);

        }, wait);
    }
}

              2：在main.js中进行全局注册

import {Debounce} from './utils/debounce'
/* 注册防抖动处理 */
Vue.prototype.$Debounce = Debounce;

              3：使用

<Button type="default" size="small" style="margin: 5px" @click="$Debounce(audit,row.infoId,1)">审核通过</Button>

 

总结
            1：可能有朋友会问，为什么不在debounce.js中就进行注册呢，要多此一举在main.js中引入，然后再进行全局注册？

                    这是因为我在使用过程中发现，当ctrl+r的时候，如果在debounce.js进行注册，这个时候就会报错，说是没有这个方法，所以我怀疑是一个加载顺序或者说速度的问题，我在页面中使用了，但是这个时候还没有全局注册完成呢，所以就报这个错了，当然这个只是我的猜测，我也不敢肯定，因为在列表页面就算CTRL+R也不会这样，只有在新建页面会这样，可能是我在新建页面引入了其他的东西导致的吧，谁知道呢，事情太多，现在没时间去追究

这个问题花了我一个多小时，特此记录！

暂时先这样啦，很晚了，睡觉。。。