code2021-l
Version:
前端自定义工具
98 lines (83 loc) • 3.98 kB
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="throttle">测试函数节流</button>
<button id="debounce">测试函数防抖</button>
<!--
1. 事件频繁触发可能造成的问题?
1). 一些浏览器事件:window.onresize（窗口改变）、window.mousemove等，触发的频率非常高，会造成浏览器性能问题
2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
2. 如何限制事件处理函数频繁调用
1). 函数节流
2). 函数防抖
3. 函数节流(throttle)
1). 理解:
在事件存在频繁触发时: 此次事件立即处理执行回调函数的前提是离上一次处理的时间间隔大于指定的时间
当前时间和 上次调用的时间差
适合多次事件按时间做平均分配响应少量几次
2). 场景：
DOM 元素的拖拽功能实现（mousemove）
页面滚动（scroll）
窗口调整（resize）
抢购疯狂点击（click）
4. 函数防抖(debounce)
1). 理解:
在事件正在频繁触发时: 此次事件发生时, 准备延迟指定时间才进行响应, 且取消掉待处理的响应
适合多次事件一次响应的情况
2). 场景：
输入框实时搜索联想（keyup/input） 搜索中 实时发请求
-->
<!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script> -->
<!-- <script src="../dist/190719-utils.js"></script> -->
<script>
// 用来返回节流函数的工具函数
function throttle(callback, delay){
let pre = 0 // 默认值不要是Date。now（） 第一次事件立即调用
return function(event){ // 节流函数/真正的事件回调函数 this是发生的标签
const current = Date.now()
if(current-pre > delay){ // 只有离上一次调用callback的时间差大于delay
// 调用真正处理事件的函数，this是事件源，参数是event
callback.call(this.event)
// 记录此次调用的时间
pre = current
}
}
}
// 用来返回防抖函数的工具
function debounce(callback,delay){
return function(event){
// 如果上次事件还没有真正处理，取消他
// if(callback.timeoutId){ // 会查找原型连
if(callback.hasOwnProperty('timeoutId')){ // 不会查找原型连
clearTimeout(callback.timeoutId)
}
//发生事件发生指定事件后才调用处理事件的回调函数
//启动定时器，只是准备真正处理
callback.timeoutId = setTimeout(() => {
// 正在处理事件
callback.call(this,event)
// 删除准备处理的事件
delete callback.timeoutId
},delay)
}
}
/* 处理点击事件的回调函数 */
function handleClick(event) { // 处理事件的回调
console.log('处理点击事件', this, event)
}
document.getElementById('throttle').onclick = handleClick
document.getElementById('throttle').onclick = throttle(handleClick, 2000, { 'trailing': false })
// document.getElementById('debounce').onclick = _.debounce(handleClick,2000)
// document.getElementById('throttle').onclick = _.throttle(handleClick, 2000, { 'trailing': false })
// document.getElementById('debounce').onclick = _.debounce(handleClick, 2000)
// document.getElementById('throttle').onclick = aUtils.throttle(handleClick, 2000)
// document.getElementById('debounce').onclick = aUtils.debounce(handleClick, 2000)
</script>
</body>
</html>