关于防抖遇到的一点小问题

测试案例demo

 //防抖实例
       let text = document.getElementById("test");
       let btn = document.querySelector("#btn");
       
       function debounce(fn, wait) {
        let task = null;
        return function () {
            if(task){
                clearTimeout(task);
            }
            task = setTimeout(() => {
                fn.apply(this, arguments);
            },wait);
        }
    }
    function fun(){
        console.log(test.value);
    }
    btn.addEventListener("click", debounce(fun,1000))

在浏览器测试的时候这个防抖是没问题的，但在项目中却出了点问题

//防抖函数
function debounce(fn, wait) {
    let task = null
    return function () {
        if (task) {
            clearTimeout(task);
        }
        task = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    }
}

form.on('submit(submit)', function (data) {
    function submit() {
        $.post('xxx', data.field, function (res) {
            if (res.code > 0) {
                xxx
            } else {
                xxx
                })
            }
        }, 'json');
    }
    debounce(submit, 1000)();
});

当task定义在防抖函数内部时，由于防抖函数自执行了，导致task没有清除，开启了多个防抖函数，致使输出多份数据，要想清除task，则需把task放在外面，以保证task被清除

var task = null
//防抖函数
function debounce(fn, wait) {
    return function () {
        if (task) {
            clearTimeout(task);
        }
        task = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    }
}