当前位置：网站首页>js函数防抖和函数节流及其他使用场景
js函数防抖和函数节流及其他使用场景
2022-08-02 20:51:00 【野原新之助919】
一、onscroll(滚动条事件)
首先我们要知道什么是onscroll滚动事件。
onscroll是在元素轴滚动时触发的。
//onscroll 滚动条事件
window.onscroll = function(){
// console.log(document.body.scrollTop); 观察滑轮距浏览器顶部的高度
// console.log(document.documentElement.scrollTop);
console.log("调用一次");
let num = document.body.scrollTop ||document.documentElement.scrollTop;
if(parseInt(num) >= 400){
document.getElementById("returntop").style = "display:block";
}else{
document.getElementById("returntop").style = "display:none";
}
} 运行结果：
二、什么是函数防抖和函数节流
防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行。
2.1函数防抖
如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。
2.2函数节流
如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应的事件处理方法。函数节流保证一个事件一定事件内只能执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
font-size: 30px;
}
</style>
<body>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
<div>函数防抖</div>
</body>
<script>
function debounce(callback,time = 300){
let t;
return function(){
clearTimeout(t);
t = setTimeout(callback,time)
}
}
window.onscroll = debounce(function(){
console.log("调用一次");
},500)
</script>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
font-size: 30px;
}
</style>
<body>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
<div>函数节流</div>
</body>
<script>
//函数节流
function throlle(callback,time){
let old = new Date().getTime();
return function(){
let now = new Date().getTime();
if(now - old>time){
callback();
old = now;
}
}
}
window.onscroll = throlle(function(){
console.log("调用1次");
},500)
</script>
</html>运行结果：
三、应用场景
函数防抖：应用于回到顶部此项功能。
//函数防抖
function debounce(callback,time = 300){
let t;
return function(){
clearTimeout(t);
t = setTimeout(callback,time)
}
}
//绑定滚动条事件
window.onscroll = debounce(returntop,500)
//回到顶部
function returntop(){
console.log("调用一次");
let num = document.body.scrollTop ||document.documentElement.scrollTop;
if(parseInt(num) >= 400){
document.getElementById("returntop").style = "display:block";
}else{
document.getElementById("returntop").style = "display:none";
}
}运行结果：
函数节流：应用于按钮，例如登录按钮。用户连续点击多次进行访问，后台在点击一次后间隔一段时间再接收。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(./img/login.gif) no-repeat;
background-size: 100%;
}
div.login{
width: 30%;
height: 320px;
margin: 150px auto;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
div.login div.email,div.tel,div.pwd,div.btn{
margin: 20px auto;
width: 90%;
}
div.login div.email input,div.tel input,div.pwd input,div.btn input{
width: 100%;
height: 40px;
padding-left: 10px;
box-sizing: border-box;
}
div.login button{
width: 100%;
height: 40px;
border-radius: 10px;
color: white;
border: 0;
outline: none;
background: rgba(0, 0, 0, 0.2);
}
div.login button:hover{
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
div.login .title{
color: white;
text-align: center;
}
div#emailerr,div#telerr,div#pwderr{
color: red;
font-size: 15px;
height: 10px;
}
</style>
<body>
<div class="login">
<h1 class="title">后台管理系统</h1>
<div class="email">
<input type="email" id="email" required onblur="isEmail()" placeholder="请输入邮箱...">
<div id="emailerr"></div>
</div>
<div class="tel">
<input pattern="^1([358][0-9]|4[456789]|66|7[0135678]|9[189])\d{8}$" type="tel" id="tel" required onblur="isTel()" placeholder="请输入手机号码...">
<div id="telerr"></div>
</div>
<div class="pwd">
<input pattern="^[0-9a-zA-Z]{6,12}" onblur="isPwd()" required type="password" id="pwd" placeholder="请输入密码...">
<div id="pwderr"></div>
</div>
<div class="btn">
<button id="btn" onclick="login()" disabled>登录</button>
</div>
</div>
</body>
<script>
emailState = false;
telState = false;
pwdState = false;
//验证邮箱
function isEmail(){
let email = document.getElementById("email");
if(email.validity.valueMissing){
email.style = "border:1px solid red;";
document.getElementById('emailerr').innerHTML = "* 邮箱不能为空!";
emailState = false;
isState();
return false;
}
if(email.validity.typeMismatch){
email.style = "border:1px solid red;";
document.getElementById("emailerr").innerHTML = "* 请输入正确的邮箱!";
emailState = false;
isState();
return false;
}
email.style = "border:1px solid green;";
document.getElementById("emailerr").innerHTML = "";
emailState = true;
isState();
return true;
}
//验证手机号
function isTel(){
let tel = document.getElementById("tel");
if(tel.validity.valueMissing){
tel.style = "border:1px solid red;";
document.getElementById('telerr').innerHTML = "* 手机号码不能为空!";
telState = false;
isState();
return false;
}
if(tel.validity.patternMismatch){
tel.style = "border:1px solid red;";
document.getElementById("telerr").innerHTML = "* 请输入正确的手机号码!";
telState = false;
isState();
return false;
}
tel.style = "border:1px solid green;";
document.getElementById("telerr").innerHTML = "";
telState = true;
isState();
return true;
}
//验证密码
function isPwd(){
let pwd = document.getElementById("pwd");
if(pwd.validity.valueMissing){
pwd.style = "border:1px solid red;";
document.getElementById('pwderr').innerHTML = "* 密码不能为空!";
pwdState = false;
isState();
return false;
}
if(pwd.validity.typeMismatch){
pwd.style = "border:1px solid red;";
document.getElementById("pwderr").innerHTML = "* 请输入正确的手机号码!";
pwdState = false;
isState();
return false;
}
pwd.style = "border:1px solid green;";
document.getElementById("pwderr").innerHTML = "";
pwdState = true;
isState();
return true;
}
function isState(){
if(emailState && telState && pwdState){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled","disabled");
}
}
//登录
function login(){
/* window.localStorage.setItem("userid",321561);
alert("登录成功!");
location.href = "./userinfo.html"; */
console.log("点击了登录按钮");
}
document.getElementById("btn").onclick = throlle(login,2000);
//函数节流
function throlle(callback,time){
let old = new Date().getTime();
return function(){
let now = new Date().getTime();
if(now - old>time){
callback();
old = now;
}
}
}
</script>
</html>
运行结果：
边栏推荐
猜你喜欢
李沐动手学深度学习V2-bert和代码实现
How to quickly compare two byte arrays for equality in .NET
Vscode快速入门、 插件安装、插件位置、修改vscode默认引用插件的路径、在命令行总配置code、快捷键
Common tools and test methods for interface testing (Introduction)
汉源高科2光12电千兆导轨式网管型工业以太网交换机双光自愈保护式以太网光交换机
Use the TCP protocol, we won't lost package?
【3D视觉】深度摄像头与3D重建
【3D视觉】realsense D435三维重建
奥特学园ROS笔记--7（289-325节）
信息系统项目管理师必背核心考点（五十八）变更管理的主要角色
随机推荐
golang 刷leetcode：祖玛游戏
golang刷leetcode：道路的最大总重要性
浅议.NET遗留应用改造
ECCV 2022 | ByteTrack: 简单高效的数据关联方法
DataGrip 安装教程 详细版
软件测试的流程规范有哪些？具体要怎么做？
Informatics Olympiad All-in-One (1259: [Example 9.3] Find the longest non-descending sequence)
用户之声 | 大学生的“课外学堂”
Electrical diagram of power supply system
[C题目]力扣1. 两数之和
golang刷leetcode：统计区间中的整数数目
C primer plus学习笔记 —— 9、联合＆枚举＆typdef
Informatics Olympiad All-in-One (1257: Knight Moves)
汇编语言中b和bl关键字的区别
WPF development through practical 】 【 automatic production management platform
.NET如何快速比较两个byte数组是否相等
【3D视觉】realsense D435三维重建
sre成长之路
信息学奥赛一本通（1258：【例9.2】数字金字塔）
千人优学 | GBase 8s数据库2022年6月大学生专场实训圆满结束