js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流，主要是用来防止过于平凡的执行某个操作，如浏览器窗口变化执行某个操作，监听某个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{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
display: none;
}
.loading span{
display: inline-block;
width: 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';
}
}
js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据的更多相关文章
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
- js 窗口滚动到一定高度时加载数据
<script type="text/javascript"> //当窗口滚动到一定高度时 某块页面开始加载数据 window.onload = function() ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- vue 实现滚动到页面底部开始加载更多
直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...
- vue使用H5实现滚动到页面底部时加载数据
使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...
- vue 2 滚动条加载更多数据实现
解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
随机推荐
- 记一次创建svc代理失败
在看尚硅谷的k8s视频中,学到ingress代理的时候,由于之前按照视频安装了V1.15.1,后面环境又出了问题,重新安装了 16.1的,为这次失败埋下了伏笔. 教案中的yaml apiVersion ...
- Shell中Bash的基本功能(二)
1 历史命令 1)历史命令的查看[root@localhost ~]# history [选项] [历史命令保存文件]选项:-c: 清空历史命令-w: 把缓存中的历史命令写入历史命令保存文件.如果不手 ...
- Atom 输入时按 Tab 快捷键提示怎么取消？
按 Esc 按 Ctrl + . 在 mac 中使用 Cmd + .
- BZOJ 1069 Luogu P4166 最大土地面积 (凸包)
题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=1069 (luogu)https://www.luogu.org/probl ...
- 《数据结构（C语言）》苏小红 课本案例
期末了,赶紧复习一波,手打一份书上的代码以便随时查阅 第二章: //顺序表存储结构 #define MAXSIZE 100 typedef struct { Elemtype *elemt; int ...
- 大哥带我们的mysql注入 基于时间的盲注
?id= and ,,sleep()) ?id= and ,,sleep()) if语句/if()函数 在基于时间型SQL盲注中,我们经常使用条件语句来判断我们的操作是否正确: ?id= and = ...
- ES6 字符串的解构赋值
字符串也可以解构赋值.这是因为此时,字符串被转换成了一个类似数组的对象. const [a, b, c, d, e] = 'hello'; a // "h" b // " ...
- NLP大赛冠军总结：300万知乎多标签文本分类任务(附深度学习源码)
NLP大赛冠军总结:300万知乎多标签文本分类任务(附深度学习源码) 七月,酷暑难耐,认识的几位同学参加知乎看山杯,均取得不错的排名.当时天池AI医疗大赛初赛结束,官方正在为复赛进行平台调 ...
- jQuery file upload callback options
autoUpload By default, files added to the widget are uploaded as soon as the user clicks on the star ...
- tcpdump指定IP和端口抓包
如下指定抓www.baidu.com 并且80端口的包 保存到test.cap 可以在Windows下面用wireshark打开 tcpdump 'port 80 and host www.baidu ...