防抖和节流,

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

防抖

  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)

节流简单描述


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值