时间戳

首页 > 解决方案 > 有没有办法可以将事件对象以及其他参数传递给去抖动的事件处理程序？

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

问题描述

我正在开发一个自定义滚动条，出于性能原因，我想添加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);
    };
}

标签： javascriptjquery

解决方案

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

element.on('mousemove' , (e) => debounce(myfunc)(a, b, e));

此外，在您提供该debounce功能后，事实证明该功能接近尾声有错误。改变：

func.apply(context.args)

至：

func.apply(context, args)

此外，debounce当您使用默认参数时，或者即使您提供非零wait参数和truefor时，该函数也不会调用任何内容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>

推荐阅读