您的位置：首页 > Web前端

前端之页面优化——节流与防抖

2019-08-05 22:06 447 查看

防抖

防抖作用就是在事件触发的过程中，不去业务处理，而是等该时间结束后，则马上进行业务处理，这里事件结束后的多长时间去执行业务代码，由我们自己设定的，也就是下面的参数wait,单位毫秒。

[code]<!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>防抖</title>
</head>
<body>
<button id="debounce">防抖，防抖，防抖</button>
</body>
</html>
<script>
window.onload = function(){
let btn = document.getElementById('debounce');
btn.addEventListener('click',debounceHandle(debounce),false);
}

//防抖函数
function debounceHandle(fn){
let timerid = null;
return function(){
clearTimeout(timerid);   //如果存在事件就清除定时器
timerid = setTimeout(function(){  //如果不存在那么就开启定时器
fn.call(this,arguments);
},300)
}
}

//执行函数
function debounce(){
console.log('防抖，防抖，防抖');
}
</script>

举个例子，当使用onKeyUp监听input框中的输入，如果用户按住一个6不放，那监听事件一直被触发，浪费性能，如果在一段时间内监听，即1秒看输入多少个6。

上面的函数也就是在300毫秒内，只会触发一次事件。总结：防抖就是在任务频发触发的情况下，只有任务触发的间隔超过指定的时间，任务才会执行。

节流

节流和防抖不同，防抖是在事件结束后一定时间后才会执行业务代码。节流则是事件进行的过程中按一定的频率执行业务代码，这里所说的频率也是我们自己设定，以下参数wait。

[code]<!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>节流</title>
</head>
<style>
div{
height: 5000px;
}
</style>
<body>
<div>节流,节流,节流</div>
</body>
</html>
<script>
window.onload = function(){
window.addEventListener('scroll',throttleHandle(throttle),false);  //监听绑定事件
}

//节流函数
function throttleHandle(fn){
let timerid = null,
booleanVal = true;   //声明一个变量做标志
return function(){
if(!booleanVal){
return;
}//如果事件正在执行，那么就返回，将布尔值改为false
booleanVal = false;
//事件未执行，创建事件
timerid = setTimeout(function(){
fn.apply(this,arguments);
boolean = true;  //事件执行完将布尔值改回
},300)
}
}

//执行函数
function throttle(){
var scrollNum = document.documentElement.scrollTop||document.body.scrollTop;
console.log(scrollNum);
}
</script>

假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航