<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
height: 500%;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//面试题:什么是函数节流?什么是函数防抖
/*
函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
- 有个需要频繁触发的函数,出于优化性能的角度,在规定时间内,只让函数触发的第一次生效,后面不生效。
*/
/*
*节流函数
* fn 要被节流的函数
* delay 规定的时间
*/
function throlle(fn,delay){
//记录上一次触发时间
var lastTime=0;
return function(){
//记录当前触发时间
var nowTime=Date.now();
if(nowTime-lastTime>delay){
//修正this指向问题
fn.call(this);
// 同步函数
lastTime=nowTime;
}
}
}
document.οnscrοll=throlle(function(){console.log('onscroll事件被触发'+Date.now());},2000);
</script>
</body>
</html>
(2). 防抖函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
height: 500%;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
/*
防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效
*/
/*
*防抖函数
* fn 要被防抖的函数
* delay 规定的时间
*/
function debounce(fn,delay){
//记录上一次触发时间
var timer=null;
return function(){
//清除上一次的延迟
clearTimeout(timer);
//重新设置延时器
timer=setTimeout(function(){
//修正this指向问题
fn.apply(this);
},delay);
}
}
document.getElementById('btn').οnclick=debounce(function(){console.log('点击事件被触发了'+Date.now());},1000);
</script>
</body>
</html>