JS判断鼠标滚轮停止滚动

2021年春修改：

不明白当初为什么写这么那么 = = ，简单版本

        function onWheel() {
            let timer = null;
            return function() {
                if(!timer) {
                    timer = setTimeout(()=>{
                        console.log('时停')
                        timer = null;
                    },300)
                } else {
                    clearTimeout(timer);
                    timer = setTimeout(()=>{
                        console.log('时停')
                        timer = null;
                    },300)
                }
                
            }
        }
        document.addEventListener('wheel', onWheel())

 

学习过程中碰到需要在滚轮滚动以及停止滚动时触发不同的事件，然后发现JS里监听的事件只有鼠标滚动事件；

然后想到的思路是设置一个计时器，200毫秒后执行滚轮停止事件，每次滚动重置计时器的时间，但是这样做的话会增加事件响应时间，因此在网上翻了很久，发现大家普遍都是这个思路，并没有看到更好的做法，只好按照这个想法做了。

下面是我完成这个判断写的代码。

 

 var moveWheel1 = true;
    var moveWheel2 = false;
    var wheelClock;
    function stopWheel(){
        if(moveWheel2 == true){
            console.log("滚轮停止了");
            moveWheel2 = false;
            moveWheel1 = true;
            //这里写停止时调用的方法
        }
    }
    function moveWheel(){
        if(moveWheel1==true){
            console.log("滚动了");
            moveWheel1 = false;
            moveWheel2 = true;
           //这里写开始滚动时调用的方法
            wheelClock = setTimeout(stopWheel,200);
        }
        else {
            clearTimeout(wheelClock);
            wheelClock = setTimeout(stopWheel,150);
        }
    }

在计时器的等待时间上写了稍微改动了初次触发和之后再触发的时间长度。是因为考虑到滚动时可能刚开始没那么快，避免反复触发开始滚动和停止滚动的事件。

 

最后是把这个函数绑定到滚轮事件上，只需要类似这样

document.addEventListener('wheel', moveWheel, false);