防抖和节流,

嗯,下面这些是我个人理解

防抖

  1. 第一步先 写个p
p{这是第$个}*100
  1. 写个函数
function technique(callback,time=200){
        let e = null 
        return function (){ 
            clearTimeout(e) 
             e = setTimeout(() => {
                callback.call(e)
            }, time);
        }
    }
  1. 调用
window.onscroll = technique(function(){
        console.log("滚动页面");
    },300)

简单说,如果在指定事件之内重复调用多次函数,那么就把之前函数清除不执行。只会执行一次函数,
触发最多的函数就是滚动事件了,页面稍微滚动就会多次触发。可是我们不需要这么多次调用,这是不是太浪费了,那么就可以利用setTimeout来减少调用次数


节流

  1. 第一步还是先 写个p
p{这是第$个}*100
  1. 写个函数
function throttle(callback,time=200) {
        var lastTime = new Date().getTime()
        return function (){
            var now = new Date().getTime()
            if (now - lastTime >= time) {
                lastTime = now 
                callback()
            }

        }
    }
  1. 调用
window.onscroll = throttle(function(){
        console.log("滚动页面");
    },300)

防抖和节流,_第1张图片


以上只是简单实现,还没有考虑到调用函数参数传递
还有以上只是个人理解,也可以-》看这里

你可能感兴趣的:(javascript,html,前端)