前端之js - 函数节流

resize,scroll,hover等js事件触发时绑定的方法会被频繁调用,致使页面产生性能问题,所以我们使用函数节流来解这个决问题

	//scroll方法中当间隔时间大于2s,do somthing执行一次
	window.addEventListener('scroll',function(){
	    var timer ;//使用闭包,缓存变量
	    var startTime = new Date();
	    return function(){
	        var curTime = new Date();
	        if(curTime - startTime >= 2000){
	            timer = setTimeout(function(){
	                console.log('do somthing')
	            },500);
	            startTime = curTime;
	        }
	 
	    }
	}());
	

	//ES6
	/**
     * 节流函数
     * @param fn Function 触发事件后需要执行的函数
     * @param delay String  间隔时间 ms
     * */
    delayScrollFunc(fn, delay) {
      const now = new Date().getTime();
      if (now - this.lastScrollCall < delay) return;
      this.lastScrollCall = now;
 
      setTimeout(() => {
        fn();
      }, 60); // 在实际项目中,我发现这里再延迟一点时间执行效果更好(针对监听scroll)
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值