防抖
描述:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<!--<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>-->
<!--<script type='text/javascript' src='jquery-1.12.4.js'></script>-->
<!--<link rel='stylesheet' type='text/css' href=''>-->
<style type='text/css'>
</style>
</head>
<body>
no:<input type='text' id="no"><br/>
debounce:<input type='text' id="debounce"><br/>
<script type='text/javascript'>
//在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
//搜索功能
function ajaxsearch(args){
let context = args[0];
console.log("执行搜索:"+context);
}
//防抖实现
function debounce(fn,wait){
let timer = null;
return function(...args){
let _args = args;
let context = this;
clearTimeout(timer);
timer = setTimeout(() => {
fn.call(context,_args);
}, wait);
}
}
//绑定元素
let inputdebounce = document.querySelector("#debounce");
//防抖绑定
let debounceajaxsearch = debounce(ajaxsearch,1000);//返回函数体
inputdebounce.addEventListener('keyup',function(e){
debounceajaxsearch(e.target.value)
})
</script>
</body>
</html>
节流(滚动)
描述:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<!--<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>-->
<!--<script type='text/javascript' src='jquery-1.12.4.js'></script>-->
<!--<link rel='stylesheet' type='text/css' href=''>-->
<style type='text/css'>
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
#box{
width: 100%;
height: 200px;
background-color: #21ca38;
border: 1px solid black;
box-sizing: border-box;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: auto;
overflow-y: auto;
}
.neiron{
height: 4000px;
width: 100%;
border: 20px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">111
<div class="neiron"></div>
</div>
<script type='text/javascript'>
//规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
//滚动功能,动态输出距离底部的距离
function ajaxcroll(args){
let context = args[0];
let boderheight = 1;//假设父元素boder宽度为1
let faraway = context.scrollHeight - context.scrollTop -context.offsetHeight +2*boderheight ;
console.log("当前元素底部(除去boder)距离子元素底部(包含boder)的距离:"+faraway);
}
//节流实现
function throttle(fn,wait){
let timer,lasttime;//lasttime 上次执行的时间
return function(...args){
let _args = args;
let context = this;
let now = +new Date();//本次触发时间gettime
if( !lasttime && now>=lasttime+wait){//第一次执行 && 超过了指定wait时间
lasttime = now;//设置最新执行时间
fn.call(context,_args);
}else{//没到等待时间 重新设置定时器=剩余等待时间
clearTimeout(timer);
timer =setTimeout(() => {
lasttime = now;//定时器执行时设置执行时间
fn.call(context,_args);
}, (wait-(now-lasttime)));
}
}
}
//绑定元素
let scrollthrottle = document.querySelector("#box");
//节流绑定
let throttleajaxcroll = throttle(ajaxcroll,500);//返回函数体
scrollthrottle.addEventListener('scroll',function(e){
throttleajaxcroll(e.target);
})
</script>
</body>
</html>