震え防止と節流について、いくつか理解しています.
16520 ワード
手ブレや節流にはどのような影響がありますか?
， ， 。
， n ， n ， 。
：
：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{padding:0;margin:0;}
.scroll-box{
width : 100%;
height : 500px;
background:blue;
overflow : auto;
}
.scroll-item{
height:1000px;
width:100%;
/* background-color: green; */
}
</style>
<body>
<div class="scroll-box">
<div class="scroll-item"></div>
</div>
</body>
<script>
let debounce = function (fn, wait) {
let timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);//
timeout = setTimeout(() => {
fn.apply(this, arguments);
// fn()
timeout = null;
}, wait);
};
}
//
function handle() {
console.log(arguments)
console.log(Math.random());
}
//
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));
</script>
</html>
， n 。
：
，
：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{padding:0;margin:0;}
.scroll-box{
width : 100%;
height : 500px;
background:blue;
overflow : auto;
}
.scroll-item{
height:1000px;
width:100%;
/* background-color: green; */
}
</style>
<body>
<div class="scroll-box">
<div class="scroll-item"></div>
</div>
</body>
<script>
let settime = (func,howtime)=>{
let timers = null
return ()=>{
if(!timers){
timers = setTimeout(() => {
// func.apply(this,arguments)
func()
timers = null
},howtime);
}
}
}
function handle(){
console.log(arguments);
console.log(Math.random());
}
document.getElementsByClassName("scroll-box")[0].addEventListener("scroll",settime(handle,2000))
</script>
</html>