JavaScript防抖、节流以及深拷贝

防抖

在一些事件中，可能会频繁的触发，这样操作内存使用效率低，就比如拉到页面底部加载时，scroll事件就会触发很多次，我们只希望它触发一次ajax请求；
实现：

function debounce(fn,delay){
	let timeout = null
	return function(){
		if(timeout) clearTimeout(timeout) //如果还在滚动，清除计时
		timeout = setTimeout(fn,delay)//如果滚动停止，一秒后执行fn
	}
}
function handle(){
	console.log(Math.random())
}
window.addEventListener('scroll',debounce(handle,1000))

节流

在开发中，我们可能会遇到对浏览器窗口的调整，以及鼠标移动事件等，我们不需要触发函数执行那么频繁，那样效率很低；
实现：

//节流第一种实现方法
function throttle(fn,delay){
	let timer = null
	return function(){
		if(!timer){ //只有没有计时时才开始计时
			fn();
			timer = setTimeout(()=>{
				timer = null
			},delay)
		}
	}
}
//第二种实现方法
function throttle(fn,delay){
	let startTime = 0
	return function(){
		let nowTime = Date.now()
		if(nowTime - startTime >= delay){
			fn()
			startTime = nowTime
		}
	}
}
function handle(){
	console.log(Math.random())
}
document.addEventListener('mousemove',throttle(handle,2000))EventListener('mousemove',throttle(handle,2000))

深拷贝

对数据进行拷贝

1. 利用JSON.parse() 和 JSON.stringify() 方法

let obj = {
	name:'wangwu',
	age:18
}
let str = JSON.stringify(obj)
let obj1 = JSON.parse(str)
obj1.age = 20
console.log(obj)//{name: "wangwu", age: 18}
console.log(obj1)//{name: "wangwu", age: 20}

2. 递归拷贝法

//检查数据类型
function checkType(obj){
	return Object.prototype.toString.call(obj).slice(8,-1)
}
//深拷贝
function deepClone(data){
	let result;//返回的结果
	let targetType =  checkType(data) //检查类型
	if(targetType == 'Object'){
		result = {}
	}else if(targetType == 'Array'){
		result = []
	}else{
		return data
	}	
	for(let i in data){
		let value = data[i]
		let valueType = checkType(value)
		if(valueType == 'Object' || valueType == 'Array'){
			  result[i] = deepClone(value) //递归
		}else{
			result[i] = value
		}
	}
	return result
}
let arr1 = [2,3,5,{name:'lisi',age:18},'wangwu']
let arr2 = deepClone(arr1)
console.log(arr1)//[2,3,5,{name:'lisi',age:18},'wangwu']
console.log(arr2)//[2,3,5,{name:'lisi',age:18},'wangwu']
arr2[3].age = 20
console.log(arr1)//[2,3,5,{name:'lisi',age:18},'wangwu']
console.log(arr2)//[2,3,5,{name:'lisi',age:20},'wangwu']

前端路漫漫，还要一步一步走。