防抖和节流，主要是用来防止过于平凡的执行某个操作，如浏览器窗口变化执行某个操作，监听某个input输入框keyup变化，瀑布流布局时Y轴滚动，图片加载。
js函数的防抖
经过一段事件才执行某个操作，如果时间内又执行了该操作则延长时间重新开始计算
/* 不做处理input触发keyup事件 */
/* 输入快的话会出现输出结果多次重复 */
window.onload = function () { let obj = document.getElementById('input') obj.addEventListener('keyup',()=>{ let val = obj.value; inputchange(val) },false) } function inputchange(val) { console.log(val) }
// 11 11 123 123 123456 123456 123456
使用防抖去处理
/* 使用防抖去处理input触发keyup事件 */ /* 输入快的话会也不会输出多次重复结果 */ window.onload = function () { let obj = document.getElementById('input') let callback = inputchange() obj.addEventListener('keyup',()=>{ let val = obj.value; callback(val) },false) } // 高级函数的应用 // 闭包time为局部变量 但不会在inputchange 函数调用完后释放 // 函数返回函数 function inputchange() { var time return function(val){ if(time) { clearTimeout(time) } time = setTimeout(() => { console.log(val) }, 200); } }
js函数节流
定义：执行某个操作后一段时间内不在不行该操作
/* 使用节流去处理input触发keyup事件 */ /* 输入快的话会也不会输出多次重复结果 */ window.onload = function () { let obj = document.getElementById('input') let callback = inputchange() obj.addEventListener('keyup',()=>{ let val = obj.value; callback(val) },false) } // 使用闭包保存hasdone function inputchange() { var hasdone = false return function(val){ // 如果已经执行 hasdone = true 则直接返回 if(hasdone) { return; } // 设置已经执行 console.log(val) hasdone =true /* 一段时间后设置hasdone 为能够再次执行 */ time = setTimeout(() => { hasdone = false }, 2000); } }
上面的节流，第一次输入马上执行，是最后输入不执行。
还有就是第一次输入不马上执行，时间内最后执行
/* 使用节流去处理input触发keyup事件 */ /* 输入快的话会也不会输出多次重复结果 */ window.onload = function () { let obj = document.getElementById('input') let callback = inputchange() obj.addEventListener('keyup',()=>{ let val = obj.value; callback(val) },false) } // 使用闭包保存hasdone /* 时间内不马上执行，时间段内只执行一次 */ function inputchange() { var hasdone = false var time = null return function(val){ // 如果已经执行 hasdone = true 则直接返回 if(hasdone) { return; } // 设置已经执行 hasdone =true /* 一段时间后设置hasdone 为能够再次执行 */ time = setTimeout(() => { console.log(val) hasdone = false }, 500); } }
js 实现浏览器滚动条滚动到最下面时，加载更多数据
<!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>Document</title>
<script src="./js/fangdouhejl.js"></script>
<style>
.box{
height:890px;
}
li{
height: 60px;
}
.loading{
80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
display: none;
}
.loading span{
display: inline-block;
8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
</style>
</head>
<body>
<ul id="box">
<li>baojia1</li>
<li>baojia2</li>
<li>baojia3</li>
<li>baojia4</li>
<li>baojia5</li>
<li>baojia6</li>
<li>baojia7</li>
<li>baojia8</li>
<li>baojia9</li>
<li>baojia10</li>
<li>baojia11</li>
<li>baojia12</li>
<li>baojia13</li>
<li>baojia14</li>
<li>baojia15</li>
<li>baojia16</li>
<li>baojia17</li>
<li>baojia18</li>
<li>baojia19</li>
<li>baojia20</li>
</ul>
<div class="loading" id="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
/* 浏览器滚动事件onsroll */ /* 实现浏览器滚动到最下面实现加载 */ var loadmore = loadmoreresource (); /* 模仿滚到最下面继续加载数据 */ window.onscroll = function (e) { /* 判断是否滚到最下面 */ /* 如果已经滚到最下面则执行某个操作 */ var e =e || window.event; // 为了兼容谷歌和火狐 document.body.scrollTop是谷歌上的 /* 滚动条的垂直位置 */ var scrolltop = document.documentElement.scrollTop||document.body.scrollTop; /* 整个页面的正文高度 */ var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight; /* 可见区域高度 */ var clientHeight = document.documentElement.clientHeight||document.body.clientHeight; /* 当scrolltop加clientHeight 等于scrollHeight */ if(scrollHeight === (scrolltop+clientHeight)) { loadmore(); } } /* 往下拉时加载的数据 */ /* 使用函数节流优化加载，否则会出现一次性加载很多次 */ function loadmoreresource () { let i = 21; /* 定义是否已经加载 */ let isloading = false; return function () { /* 假如已经在加载中了则直接返回 */ if(isloading) { return; } /* 出现加载动画 */ loadingimg() let obj = document.getElementById('box'); /* 代码片段 用于插入多个标签 */ let docfragment = document.createDocumentFragment(); for(let j=0;j<5;j++){ let li = document.createElement('li') li.append('baojia'+i) docfragment.appendChild(li) i++; } /* 设置当前加载的状态为true */ isloading = true; /* 使用setTimeout 模拟从api加载数据 */ setTimeout(() => { obj.appendChild(docfragment) loadingimg() /* 将加载状态设置为false */ isloading = false }, 3000); } } /* 加载动画 */ function loadingimg() { let loading = document.getElementById('loading'); if(loading.style.display==='block') { loading.style.display = 'none'; } else { loading.style.display = 'block'; } }