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 ...
随机推荐
- 关于Qt 构建套件(Kit) 编译器 自动识别不正确 不能修改的问题
当系统内有多个Qt的版本的时候,QtCreater会自动识别出 编译器,Qt版本,和构建套件(Kit),但是有时候会发现,识别出来的路径不对,而且不能修改. 当出现这是问题的时候,可以到 qtcrea ...
- 后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息
后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息 一.总结 一句话总结: 1.思路和我想的一样,有错误的时候弹出提示错误消息的模态框就好,没有错误的时候不管它 2.把模态框的 ...
- md5sum c实现
#include <stdio.h>#include <ctype.h> #define STR_VALUE(val) #val#define STR(name) STR_VA ...
- 使用jdk自带的visualVM监控远程监控was
1.登录was控制台https://172.16.87.221:9043/ibm/console/unsecureLogon.jsp服务器--服务器类型--Java 和进程管理---进程定义---Ja ...
- C/C++中的 void 和 void*
转自:https://blog.csdn.net/tonglin12138/article/details/86516789 写在前面:开门见山,大家看下面这个例子: unsigned char er ...
- Java定时器Timer
Java定时器Timer在JDK库中,Timer类主要负责计划任务的功能,也就是在指定的时开始执行某一个任务.Timer类的主要作用就是设置计划任务,但封装任务的类却是TimerTask类,执行计划任 ...
- 阶段3 1.Mybatis_05.使用Mybatis完成CRUD_3 Mybatis的CRUD-修改和删除操作
增加更新操作 更新用户的配置 测试类 删除的操作 这里的parpameterType值可以是:Integer.INTEGER.int.java.lang.Integer 讲到typeAliases标签 ...
- yum安装Apache2.4
一.系统环境 系统版本为centos6.5最小化安装 # cat /etc/centos-release CentOS release 6.5 (Final) 查看系统自带yum库Apache版本 # ...
- WebMvcConfigurer 与 WebMvcConfigurationSupport避坑指南
我们知道,在Spring Boot 2.0后用自己的的配置类继承WebMvcConfigurerAdapter时,idea会提示这个类已经过时了. 通常情况下我们会采用下面两种代替方案: 实现WebM ...
- PHP is_file() 函数
is_file() 函数检查指定的文件名是否是正常的文件. 语法is_file(file)参数 描述file 必需.规定要检查的文件.说明如果文件存在且为正常的文件,则返回 true. 提示和注释 注 ...