Javascript 滚动时仅触发onwheel侦听器一次

我正在使用jQuery

mousewheel

listener检测滚动事件。使用一个阈值，我让代码触发代码一次，但当用户快速滚动时，它不起作用

我的JavaScript代码

var prevPosition = -1;
var scrollStatus = null;
var result = 0;
var elements = ["child1","child2","child3"];
var position = 0;
var isInProgress = false;
$('#parent').on('mousewheel', function(event, delta) {
            event.preventDefault();
            console.log(isInProgress);
            if(isInProgress)
                return;
            setTimeout(function(){
                isInProgress = true;
            var value = event.originalEvent.deltaY;
            result =  result + value;
            if(result > 500) {
                result = 0;
                console.log('scroll up');
                console.log(position);
                if(position<elements.length-1){
                    $("#"+elements[position]).hide();
                    position++;
                    $("#"+elements[position]).show();
                }
                else{
                    //alert('cae');
                    $("#child4").show();
                }
            } 
            else if( result < -500) {
                result = 0;
                console.log('scroll down');
                if(position>0){
                    $("#"+elements[position]).hide();
                    position--;
                    $("#"+elements[position]).show();
                }
            }
            isInProgress = false;
            },1000);
        });

var-prevPosition=-1；
var-scrollStatus=null；
var结果=0；
变量元素=[“child1”、“child2”、“child3”]；
var位置=0；
var isInProgress=假；
$（'#parent'）。在（'mousewheel'，函数上（事件，增量）{
event.preventDefault（）；
控制台日志（isInProgress）；
如果（isInProgress）
返回；
setTimeout（函数（）{
isInProgress=true；
var值=event.originalEvent.deltaY；
结果=结果+值；
如果（结果>500）{
结果=0；
log（“向上滚动”）；
控制台日志（位置）；
如果（位置0）{
$（“#”+元素[位置]）.hide（）；
位置--；
$（“#”+元素[位置]）.show（）；
}
}
isInProgress=false；
},1000);
});

---

但这在大多数情况下都不起作用，有没有标准的方法来实现这一点？

经过一天的努力，终于找到了一个优雅的解决方案：

        var prevPosition = -1;
        var scrollStatus = null;
        var result = 0;
        var elements = ["child1","child2","child3"];
        var position = 0;
        var isInProgress = false;
        $('#parent').on('mousewheel', function(event, delta) {
            event.preventDefault();
            console.log(isInProgress);
            if(isInProgress)
                return;
            var value = event.originalEvent.deltaY;
            result =  result + value;
            if(result > 500) {
                isInProgress = true;
                result = 0;
                console.log('scroll up');
                console.log(position);
                if(position<elements.length-1){
                    $("#"+elements[position]).hide();
                    position++;
                    $("#"+elements[position]).show();
                }
                else{
                    $("#child4").show();
                }
                setTimeout(()=>{
                    isInProgress = false;
                },1000);
            } 
            else if( result < -500) {
                isInProgress = true;
                result = 0;
                console.log('scroll down');
                if(position>0){
                    $("#"+elements[position]).hide();
                    position--;
                    $("#"+elements[position]).show();
                }
                setTimeout(()=>{
                    isInProgress = false;
                },1000);
            }
        });

var-prevPosition=-1；
var-scrollStatus=null；
var结果=0；
变量元素=[“child1”、“child2”、“child3”]；
var位置=0；
var isInProgress=假；
$（'#parent'）。在（'mousewheel'，函数上（事件，增量）{
event.preventDefault（）；
控制台日志（isInProgress）；
如果（isInProgress）
返回；
var值=event.originalEvent.deltaY；
结果=结果+值；
如果（结果>500）{
isInProgress=true；
结果=0；
log（“向上滚动”）；
控制台日志（位置）；
如果（位置）{
isInProgress=false；
},1000);
} 
否则，如果（结果<-500）{
isInProgress=true；
结果=0；
log（“向下滚动”）；
如果（位置>0）{
$（“#”+元素[位置]）.hide（）；
位置--；
$（“#”+元素[位置]）.show（）；
}
设置超时（（）=>{
isInProgress=false；
},1000);
}
});

出了什么问题

---

我以前的代码的问题是，仅在用户滚动1秒后，isInProgress状态才设置为True，但在该延迟内，许多事件正在触发，isInProgress无法达到其目的。现在，我已经更新了代码，使isInProgress仅在满足阈值的情况下才设置为true，并再次将其设置为false，超时时间为1秒（作为锁定机制），因此它最终工作了

你想要实现什么？当

setTimout

处于删除状态时，我认为它工作得很好。我需要通过覆盖滚动条（）来创建类似的内容：；删除setTimeout似乎不起作用尝试以下操作为什么不使用节流功能而不是阈值？为什么不使用去抖动？