Question

我正在开发自定义滚动条，出于性能原因，我想将debounce添加到mousemove事件中。问题在于事件对象没有传递给处理程序，而我得到了undefined。

这就是我想做的事情

function myFunc (a, b, event) {some code}
element.on('mousemove' , debounce(myfunc));

不起作用！我也尝试过：

let myDBFunc = debounce(myFunc, 200)
element.on('mousemove', function(event){
    myDBFunc(a, b, event);
});

什么都没有！有什么想法吗？

更新：去抖动功能：

function debounce(func, wait = 20,immediate = true){
    let timeout;
    return function() {
        let context = this, args = arguments;
        let later = function () {
            timeout = null;
            if(!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context.args) ; //edited to func.apply(context, args);
    };
}

Answer 1

它不起作用，因为未传递Promise [Object] { _bitField: 0, _fulfillmentHandler0: undefined, _rejectionHandler0: undefined, _promise0: undefined, _receiver0: undefined }，a参数，并且事件对象被作为第一个参数传递。您可以通过匿名函数传递所有这三个参数，例如：

此外，在提供element.on('mousemove' , (e) => debounce(myfunc)(a, b, e));函数之后，结果证明该函数在接近尾声时出现错误。更改：

debounce

收件人：

func.apply(context.args)

此外，当您使用默认参数，或者甚至为func.apply(context, args)提供非零的debounce参数和wait时，该true函数也不会调用任何东西。更改后效果会更好：

immediate

收件人：

if(!immediate) func.apply(context, args);

演示

出于您的目的，我将使用此if(!callNow) func.apply(context, args);函数。请参阅下面的演示以及更多参数：

debounce

function debounce(func, wait = 200) {
    let timeout;
    
    return function(...args) { 
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            timeout = setTimeout(() => timeout = null, wait);
            func.apply(this, args);
        }, timeout ? wait : 0);
    };
}

const element = $('div');

function myfunc(a, b, e) {
    console.log(a, b, e.target.tagName, performance.now());
}

const f = debounce(myfunc);
let a = 1, b = 2;
element.on('mousemove' , (e) => f(a, b, e));

有没有一种方法可以将事件对象以及其他参数传递给去抖动的事件处理程序？

1 个答案:

演示