前端优化之节流防抖

节流

• 下方法可简便的阻止click事件多次发生，但要想再使按钮可用，要页面刷新。

        var sum = 0;
        //方法一
       $("#btn").click(function(){
           sum++;
           console.log("点击了"+sum+"次");
            $(this).unbind("click");
       });
       //方法二
        $("#btn").one("click",function(){
           sum++;
           console.log("点击了"+sum+"次");
        });
    

• 下方法可在一定时间内对按钮点击事件进行节流，适用于大多数按钮防止多次点击的情况

function limitFun(fun, limitTime) {
			//不传limitTime默认间隔1s
			limitTime = limitTime || 1000;
			return function (e) {
				var lastTime = $(this).data('lastTime');
				//var nowTime = e.timeStamp;  有兼容问题
                var nowTime = Date.now() || new Date().getTime();
				//如果是第一次点击或最后一次事件触发的时间戳减去上一次事件发生的时间戳大于limitTime时，触发函数
				if (!lastTime || nowTime - lastTime > limitTime) {
					fun.call(this, e);
					$(this).data('lastTime', nowTime);
				}
			}
		}

		$("#btn").click(limitFun(function () {
			console.log(111);
		}, 1000));

防抖

		var timer = null;
		// 给页面绑定onscroll事件，该事件为频发事件
		document.body.onscroll = function () {
			// 根据页面卷动值位置，判断是否触发事件
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop >= 700) {
				clearTimeout(timer);
				timer = setTimeout(function () {
					console.log("事件发生");
				}, 200);
			}
		}