越来越觉得原生JS能力很重要,所有的前端框架都是围绕这JS的基础上搭建的,前端的内容更新快,内容多,要想立刻全部都学会,首先是时间成本,其次是理解力方面,也就是能看懂这个框架的底层实现原理。

扯远了~还是说下防抖与节流的接种实现方式。这两种优化都是前端的优化方案,简单介绍下原理跟实现方式:

防抖

  • 首先是防抖,这个最常应用在滚动事件上,比如页面滚动某一距离时触发某事件,但是问题是滚动事件触发很频繁,如果用户一直滚动页面,那么这个事件就会一直触发,很明显这种方式不是我们想要的。
  • 所以,防抖其实就是,在设定的某一段时间内,用户如果频繁触发事件,那么做处理让这个事件不执行。
  • 其实也就是可以设置一个定时器,如果用户频繁触发事件,就将定时器清除,那么定时器中执行的事件也会被清除,实现:
function debounce(fn,delay){
    let timer = null //默认置为空
    return function() {
        if(timer){//当time为true时
            clearTimeout(timer) //清除定时器
        }
        timer = setTimeout(fn,delay) //否则执行定时器中的fn事件
    }
}
/* 因为定时器是异步的,所以你一直触发debounce,就一直将timer置为null,
当停下来的那刻,debounce不再执行,但是此时的定时器是异步的,会执行最后一次fn事件 */
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动位置:' + scrollTop);
}
window.onscroll = debounce(showTop,1000) //打印一下

节流

  • 所谓节流,就是在设定的某一段时间内,函数只执行1次。比如设置了1000ms,那么你触发滚动,1秒内这个事件只执行1次,你在1秒内滑动了100次触发的函数也就只执行一次。实现:
 <script>
        function throttle (fn,delay){
            let valid = true  //先定义一个valid为true
            return function(){
                if(!valid){ //当为false时,直接return出节流函数
                    return false
                }
                valid = false //valid置为false
                setTimeout(() => { //异步执行定时器
                    fn()
                    valid = true //重新置为true
                }, delay);   
 }}
/*
所以上面这个节流函数,当触发函数时,valid为true,不走if判断,
然后再将valid置为false,接着往下是一个异步的定时器,里面执行fn函数,再重新将fn置为true。
所以当用户在设定的时间内,一直触发节流函数,valud一直为false,走if判断return出,延时定时器异步触发后将执行fn,并且重新将valid置为true,不走if判断..
*/
        function show() {
            const srcollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log('距离:'+srcollTop)
        }
        window.onscroll = throttle(show,1000)
    </script>

实现的方法有很多,不再一一举例了。


爬。