如何在此处正确实现去抖动时间，以便在纯 JavaScript 中每个时间限制仅触发一次？

Posted 2023-05-09

【中文标题】如何在此处正确实现去抖动时间，以便在纯 JavaScript 中每个时间限制仅触发一次？

【英文标题】：How do I properly implement debounce time here so that it fires only once per time limit in pure JavaScript?

【发布时间】：2021-12-06 23:47:42

【问题描述】：

目标

我正在努力完成以下工作：

有一个滑块/slidehow/carousel/任何你想调用它的东西，我希望它在你向右或向左滑动时每 3 秒注册一次触摸事件。为此，我编写了以下代码：

const debounce = (func, delay) => 
    let debounceTimer
    return function () 
        const context = this
        const args = arguments
        clearTimeout(debounceTimer)
        debounceTimer
            = setTimeout(() => func.apply(context, args), delay)
    


if (location.pathname === "/") 
var backgroundElement = document.querySelector('.carousel');
hammer = new Hammer(backgroundElement)
    hammer.on('panright panleft', function (event) 
        //console.log(event.deltaX);
        if (event.deltaX > 250)  
        debounce(carousel.next(), 3000);
        event.preventDefault();
    
    if (event.deltaX < -250) 
        debounce(carousel.previous(), 3000);
        event.preventDefault();
    

手头的问题

问题是，如果我在滑动后继续滑动，它似乎会不断地来回切换幻灯片，所以我的去抖动实现或 event.preventDefault(); 似乎都不起作用。

如何解决此问题以实现预期功能？

附：我宁愿不只为这个单一功能使用 RxJS，我认为这有点过头了。

更新

我可以使用 Lodash，并且我已经尝试实现我的代码，但我遇到了错误。 我的“新”代码是：

if (location.pathname === "/") 
    var backgroundElement = document.querySelector('.carousel');
    hammer = new Hammer(backgroundElement)
    hammer.on('panright panleft', function (event) 
        console.log(event.deltaX);
        if (event.deltaX > 250) 
            //_.debounce((event)=>  carousel.next(); , 1000);
            _.debounce(nextSlide(), 1000);
            //event.preventDefault();
        
        if (event.deltaX < -250) 
            //_.debounce((event)=>  carousel.previous(); , 1000);
            _.debounce(prevSlide(), 1000);
            //event.preventDefault();
        
    
    );

我的错误是（当我在轮​​播上滑动时触发）：

Uncaught TypeError: Expected a function

更新 2

哎呀，我太绝望了，现在我什至可以使用 RxJS，但是由于语法错误，我的代码无法正常工作。如果答案显示错误，我将不胜感激。我的代码原型如下：

if (location.pathname === "/") 
    var backgroundElement = document.querySelector('.carousel');
    hammer = new Hammer(backgroundElement)
    hammer.on('panright panleft', function (event) 
        console.log(event.deltaX);
        if (event.deltaX > 250) 
            //_.debounce((event)=>  carousel.next(); , 1000);
            _.debounce(nextSlide(), 1000);
            //event.preventDefault();
        
        if (event.deltaX < -250) 
            //_.debounce((event)=>  carousel.previous(); , 1000);
            _.debounce(prevSlide(), 1000);
            //event.preventDefault();
        
    
    ).pipe(
        map((event.deltaX) => event.deltaX.debounceTime(1000))).subscribe(x => console.log(x);)
    )
;

console.log 仅用于测试过滤，如果它有效，我将添加幻灯片更改行为。

【参考方案1】：

var delayHandler = debounce(function(event) 
    //console.log(event.deltaX);
    if (event.deltaX > 250) 
        carousel.next();
    
    if (event.deltaX < -250) 
        carousel.previous();
    
, 3000);

hammer.on('panright panleft', function (event) 
    delayHandler(event);
);

【讨论】：

现在由于某种原因它根本不起作用：/

对不起，看错了。我已经更新了我的答案:)

新的编辑也不起作用：/

你可以试试我的新版本:))

也不起作用：/一直没有错误