返回顶部效果，性能问题

Question

window.onscroll = function(){    var top = document.documentElement.scrollTop || document.body.scrollTop;    if(top >= 300){         ele.style.display = 'block'     }else{         ele.style.display = 'none'     } }当滚动300px后，display为block;以后鼠标向下滑动都会运行ele.style.display = 'block',虽然当时的ele已经为block，但是这样持续运行这句 会不会持续重绘影响性能。

Answer 1

滚动的时候,会一直触发滚动的回调函数
在回调函数中使用如果逻辑简单还好,如果涉及到强逻辑建议加上节流函数来控制,简单的实现方式如下

var intervalwindow.addEventListener('scroll', function(){    if(interval){
        clearTimeout(interval)
    }
    interval = setTimeout(function(){        // 这里写主要的业务逻辑
        // 这样所有的复杂操作都会延迟300毫秒执行,并且不会因为多次滚动导致反复触发
    }, 300)
})

之前由于概念没弄清楚,所以写了个错误的示范,虽然上面的示范也能执行,但是下面的示范也许会更适合当前的场景,感觉小明同学指出

var frequency = 300 // 300毫秒执行一次var intervalvar lastwindow.addEventListener('scroll', function(){    var now = Date.now()    
if(last && last < now + frequency){        // 保证滚动停下之后的300ms还会再执行一次
        if(interval){
            clearTimeout(interval)
            
        }
        interval = setTimeout(function(){
            last = now
            doSomething()
        }, frequency)
    }else{
        last = now
        doSometing()
    }
})function doSomething(){}

当然上面只是一个简单的实现,网上有很多关于Debounce(防抖),Throttle(节流)的封装,楼主可以自行参考与学习