需求
window滚动时只执行一次函数调用

实现代码:

    //定义once函数
    function once(func){
        var runned = false;
        return function(){
            if(!runned){
                func();``````
                runned = true;
            }
        }
    }
    
    //错误的做法:监听scroll事件并只输出一次‘scrolling’字符串
    window.addEventListener('scroll',function(){
        once(()=>{
            console.log('scolling...')
        })();
    }) 

运行结果:

  • 每次滚动浏览器,字符串’scrolling’都会输出

原因:

  • once函数会被调用多次,布尔变量runned会被重新创建,所以无法用来限制返回函数只执行一次。

正确的做法:

    let returnFunc = once(()=>{
        console.log('scrolling...')
    })
    
    window.addEventListener('scroll',function(){
        returnFunc();
    })
    

简化版:

     window.addEventListener('scroll',once(()=>{
         console.log('scrolling');
     })

参考文档:

once-bullmind

关键词:
once(),滚动,函数式编程

**%E9%9C%80%E6%B1%82**%0Awindow%E6%BB%9A%E5%8A%A8%E6%97%B6%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%0A%20%0A**%E5%AE%9E%E7%8E%B0%E4%BB%A3%E7%A0%81%EF%BC%9A**%0A%60%60%60javascript%0A%20%20%20%20%2F%2F%E5%AE%9A%E4%B9%89once%E5%87%BD%E6%95%B0%0A%20%20%20%20function%20once(func)%7B%0A%20%20%20%20%20%20%20%20var%20runned%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20return%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!runned)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20func()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20runned%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F%2F%E9%94%99%E8%AF%AF%E7%9A%84%E5%81%9A%E6%B3%95%EF%BC%9A%E7%9B%91%E5%90%ACscroll%E4%BA%8B%E4%BB%B6%E5%B9%B6%E5%8F%AA%E8%BE%93%E5%87%BA%E4%B8%80%E6%AC%A1%E2%80%98scrolling%E2%80%99%E5%AD%97%E7%AC%A6%E4%B8%B2%0A%20%20%20%20window.addEventListener('scroll'%2Cfunction()%7B%0A%20%20%20%20%20%20%20%20once(()%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log('scolling...')%0A%20%20%20%20%20%20%20%20%7D)()%3B%0A%20%20%20%20%7D)%20%0A%60%60%60%0A%0A**%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C%EF%BC%9A**%0A*%20%E6%AF%8F%E6%AC%A1%E6%BB%9A%E5%8A%A8%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E2%80%99scrolling%E2%80%99%E9%83%BD%E4%BC%9A%E8%BE%93%E5%87%BA%0A%20%20%20%20%0A%0A**%E5%8E%9F%E5%9B%A0%EF%BC%9A**%0A*%20once%E5%87%BD%E6%95%B0%E4%BC%9A%E8%A2%AB%E8%B0%83%E7%94%A8%E5%A4%9A%E6%AC%A1%EF%BC%8C%E5%B8%83%E5%B0%94%E5%8F%98%E9%87%8Frunned%E4%BC%9A%E8%A2%AB%E9%87%8D%E6%96%B0%E5%88%9B%E5%BB%BA%EF%BC%8C%E6%89%80%E4%BB%A5%E6%97%A0%E6%B3%95%E7%94%A8%E6%9D%A5%E9%99%90%E5%88%B6%E8%BF%94%E5%9B%9E%E5%87%BD%E6%95%B0%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E3%80%82%0A%0A**%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%81%9A%E6%B3%95%EF%BC%9A**%0A%60%60%60javascript%0A%20%20%20%20let%20returnFunc%20%3D%20once(()%3D%3E%7B%0A%20%20%20%20%20%20%20%20console.log('scrolling...')%0A%20%20%20%20%7D)%0A%20%20%20%20%0A%20%20%20%20window.addEventListener('scroll'%2Cfunction()%7B%0A%20%20%20%20%20%20%20%20returnFunc()%3B%0A%20%20%20%20%7D)%0A%20%20%20%20%0A%60%60%60%0A%0A%E7%AE%80%E5%8C%96%E7%89%88%EF%BC%9A%0A%60%60%60javascript%0A%20%20%20%20%20window.addEventListener('scroll'%2Conce(()%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20console.log('scrolling')%3B%0A%20%20%20%20%20%7D)%0A%60%60%60%0A%0A%0A**%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3%EF%BC%9A**%0A%5Bonce-bullmind%5D(https%3A%2F%2Fwww.bullmind.com%2Fdiagram%2F0d11ad50adc77f78ee9d7a11aef9f79b%2Fonce)%0A%0A**%E5%85%B3%E9%94%AE%E8%AF%8D%EF%BC%9A**%0Aonce()%2C%E6%BB%9A%E5%8A%A8%EF%BC%8C%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%0A%0A

为什么once执行了多次

2019-02-16 14:39:12 0 51
这里是评论

相关推荐