<!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>
html,
body {
height: 500%;
}
</style>
<body>
<button id='btn'>点</button>
<script>
//节流:一个函数执行后，只有大于设定的执行周期后，才会执行第二次，
//有个需要频繁出发的函数，出于性能优化，在规定的时间内，只让出发的第一次生效，后边的不生效
/* fn被节流的函数 deley 规定时间*/
function throttle(fn, delay) {
//记录上一次函数出发时间
let lastTime = 0
return function() {
//记录当前函数触法的时间
let nowTime = Date.now()
if (nowTime - lastTime > delay) {
fn.call(this)
lastTime = nowTime
}
}
}
document.onscroll = throttle(() => {
console.log('触发成功！' + Date.now())
}, 1000)
//------------------------------------------------------------------------------------------------------------------------
//防抖函数：一个频繁出发的函数，在规定的某个时间内，只让最后一次生效，前边的不生效如：频繁点击按钮
function debounce(fn, delay) {
let timer = null
return function() {
//清楚上一次延时器
clearTimeout(timer)
//重新设置新的延时器，
timer = setTimeout(() => {
fn.call(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(() => {
console.log("触发了")
}, 2000)
</script>
</body>
</html>
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
