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

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

它不起作用，因为未传递a ， b参数，并且事件对象作为第一个参数传递。 您可以通过匿名函数传递所有这三个函数，如下所示：

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)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>move mouse here</div>