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秒）（用作锁定机制），因此终于可以正常工作了！

滚动时仅触发一次车载监听器

1 个答案: