<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>检测输入状态</title>
</head>
<body>
<p style="display:none">正在输入</p>
<input type="text">
</body>
<script>
var timer=null;
function $(el){ return document.querySelector(el) }
$("input").onkeyup=function(e){
if(e.keyCode==8){
$("p").style.display="none";
}
else{
clearInterval(timer);
$("p").style.display="block";
setInterval(hide,5000);
}
}
function hide(){
$("p").style.display="none";
}
</script>
</html>
关于防抖与节流的应用方案
防抖：一段时间完成一个操作；节流：定时完成操作。
应用场景：
防抖：
1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。
2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。
3、防止重复提交。
节流：
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖与节流</title>
<style>
.container{width: 400px;height: 200px;background: #ccc;text-align: center;font-size: 25px;line-height: 200px;}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script>
var count=1;
var container=document.querySelector(".container");
function getUser() {
this.innerHTML= count++;
}
// container.onmousemove=demo(getUser,1000,true);//防抖
container.onmousemove = time(getUser, 1000);//节流
。。。。。。。。。。。。。
作者：Vam的金豆之路
篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/50940.html
