防抖和节流
防抖
在固定的时间内没有触发事件,会在固定时间结束后触发,如果固定时间内触发事件了,会在延长固定时间再触发
防抖主要利用定时器实现
//用定时器实现防抖
function debounce(func,wait) {
var timer=null;
return function() {
//保存当前调用的dom对象
var _this=this;
//保存事件对象
var args=arguments;
clearTimeout(timer)
timer=setTimeout(function() {
func.apply(_this,args)
},wait)
}
}
节流:
无论在固定时间内是否有事件触发,都会按照固定时间规律触发
具体实现有两种方法
第一种:时间戳
//时间戳版本实现节流
function throttle(func,wait) {
//定义初始时间
var oldTime=0;
return function() {
var _this=this;
var args=arguments;
//当前时间戳
var newTime=+new Date();
//判断用当前时间减去旧的时间,如果大于wait指定的时间就会触发
if(newTime-oldTime>wait) {
//执行触发的函数
func.apply(_this,args)
//将旧时间更新
oldTime=newTime;
}
}
第二种:定时器
//时间戳版本实现节流
function throttle(func,wait) {
var timer=null;
return function() {
var _this=this;
var args=arguments;
if(!timer) {
timer=setTimeout(function() {
timer=null;
func.apply(_this,args)
},wait)
}
}
}
目前市面主流工具函数库:lodash已经提供了全面的工具方法
首先安装:npm install lodash
引入:import _ from ‘lodash’