javascript - 滚动时仅触发一次 onwheel 监听器

Question

---

我正在使用 jQuery mousewheel 监听器来检测滚动事件。有一个阈值，我让代码触发一次代码，但是当用户快速滚动时它不起作用。

我的 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);
        });

但这在大多数情况下不起作用，有什么标准的方法可以实现吗？

Answer 1

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

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

出了什么问题？

我之前代码的问题是，仅在用户滚动 1 秒后，isInProgress 状态才设置为 True，但在该延迟内，许多事件都在触发，而 isInProgress 无法达到其目的。现在我更新了代码，仅当满足阈值时才将 isInProgress 设置为 true，并再次将其设置为 false，超时时间为 1 秒(作为锁定机制)，因此它终于起作用了!!