removeEventListener 失效问题

removeEventListener 失效问题

removeEventListener(’’,callBack) 中的callBack不执行

源码

let defaultScrollY = 0;
useEffect(()=>{
        window.addEventListener('scroll',() => {
        	defaultScrollY = window.scrollY;
        });
        return ()=> {
            console.log('卸载');
            window.removeEventListener('scroll',() => {
            	console.log('清除');
            });
        };
    },[]);

打印结果

卸载

原因

addEventListener 和 removeEventListener 中使用了箭头函数，实际上不是同一个函数

解决方案

useEffect(()=>{
        console.log(window.scrollY);
        /** 回调 */
        const callBack = () => {
            defaultScrollY = window.scrollY;
        };
        window.addEventListener('scroll',callBack);
        return ()=> {
            window.removeEventListener('scroll',callBack);
        };
    },[]);

设为同一个callBack,如果有不同需求，可以通过传参来区分两者区别