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 ...
随机推荐
- java jdk原生的http请求工具类
package com.base; import java.io.IOException; import java.io.InputStream; import java.io.InputStream ...
- SQL Server Availability Group Failover 测试
兼容性测试: 测试脚本: 环境:windows failover cluster 主库执行脚本: USE [master]GOALTER AVAILABILITY GROUP [test_AG]MOD ...
- hook C++
Intercepting Calls to COM Interfaces(hook com接口) 通过COM组件IFileOperation越权复制文件 代码注入之远程线程篇 使用VC++通过远程进程 ...
- leetcode 56. Merge Intervals 、57. Insert Interval
56. Merge Intervals是一个无序的,需要将整体合并:57. Insert Interval是一个本身有序的且已经合并好的,需要将新的插入进这个已经合并好的然后合并成新的. 56. Me ...
- ArcCatalog连接远程ArcGIS Server服务器
注意:本地机器登陆的用户名和密码必须与ArcGIS Server服务器上的用户名和密码完全一致,并加入到agsadmin和agsuser组中.重启电脑. (其实就是在自己的电脑上建立一个用户名,这 ...
- java网络通信：netty
Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一个基于NIO的客户,服务器端编程框架,使用Netty 可以确保 ...
- Python学习之==>模块结构调整
一.为什么要进行模块结构调整 当一个脚本中有大量的配置.方法及接口时,脚本显得十分臃肿,可读性很差.为了提高代码的易读性,可以将一个繁杂的脚本根据不同的功能放在不同的目录下分类管理,这整个过程叫做模块 ...
- oracle rman catalog--ORA-01580: error creating control backup file
在测试rman catalog时,错误的设置了snapshot路径,报错 RMAN> show snapshot controlfile name; RMAN configuration par ...
- spring boot + mybatis 连接 oracle 出现 ORA-00923: 未找到要求的 FROM 关键字 错误
1.原因 hikari 连接池配置错误,mysql和oracle的配置不一样 2.修改 spring: datasource: hikari: connection-test-query: selec ...
- laravel 中 同个主域名下，多个项目共享session登录状态
共享session的前提是session在一个公共的地方,比如database,redis等,laravel框架提供了很大驱动选择: 这里只需要在配置文件里配置三个地方即可 'driver' => ...