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 ...
随机推荐
- go语言系列--golang在windows上的安装和开发环境goland的配置
在windows上安装golang软件 golang中国网址为:https://studygolang.com/dl 我的学习选择版本:1.12.5 golang 1.12.5版本更新的内容:gola ...
- python-opencv中的cv2.inRange函数
本次目标是将一副图像从rgb颜色空间转换到hsv颜色空间,颜色去除白色背景部分 具体就调用了cv2的两个函数,一个是rgb转hsv的函数 具体用法 hsv = cv2.cvtColor(rgb_ima ...
- 官方转译：截止2018-12-10，chromedriver与chrome对应关系表
谷歌驱动下载地址: http://npm.taobao.org/mirrors/chromedriver/ http://chromedriver.storage.googleapis.com/ind ...
- flask + celery实现定时任务和异步
参考资料: Celery 官网:http://www.celeryproject.org/ Celery 官方文档英文版:http://docs.celeryproject.org/en/latest ...
- C# App.config 自定义 配置节
1)App.config <?xml version="1.0" encoding="utf-8" ?><configuration> ...
- 使用 Dom4j 对XML操作！！！
转自:http://blog.csdn.net/redarmy_chen/article/details/12969219 dom4j是一个Java的XML API,类似于jdom,用来读写XML文件 ...
- 阶段3 1.Mybatis_08.动态SQL_01.mybatis中的动态sql语句-if标签
创建新的工程 复制到新建的项目里面 pom.xml依赖部分复制过来 dao中整理代码 只保留四个查询 映射文件也只保留四个查询方法 增加一个根据条件查询的方法. 由于用了别名,所以parpameter ...
- Jedis源码浅析
1.概述 Jedis是redis官网推荐的redis java client,代码维护在github https://github.com/xetorthio/jedis. 本质上Jedis帮我们封装 ...
- CMakeLists.txt中使用循环
编译一个安卓下的so,此so依赖其他的库,通过循环简化操作 set(UVC_LIBS UVCCamera uvc usb100 jpeg-turbo1500) FOREACH(UVC_LIB ${UV ...
- C++：补齐函数编写递归函数计算x的y次幂（hhhh函数 ！头疼！）
编写递归函数计算x的y次幂,在主程序中输入非零整数x和整数y,输出求幂的结果(保留两位小数).考虑y为负数和0的情况. #include<iostream> #include<iom ...