防抖和節(jié)流
html代碼
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>Title
? ? ? ? #demo1{
? ? ? ? ? ?width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? ? ? background:chartreuse;
? ? ? ? }
#demo2{
width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? ? ? background:aqua;
? ? ? ? }
<div id="demo1">
<div id="demo2">
<script src="stream.js">
</html>
js代碼
let demo1=document.getElementById('demo1');
let demo2=document.getElementById("demo2");
demo1.addEventListener('click',debounce(1,3000));
demo2.addEventListener('click',throttle(2,3000));
//防抖
let count1=0;
function fn1(num) {
demo1.innerHTML=count1++;
? ? console.log(num);
}
function? debounce(num,await) {
let timeout;
? ? return function () {
if(timeout){
? ? ? ?clearTimeout(timeout)
}
var me=this;
?timeout=setTimeout(()=>{
? ? ? ? ?fn1.call(me,num)
},await)
}
}
//節(jié)流
let count2=1;
function fn2(num) {
demo2.innerHTML=count2++;
? ? console.log(num);
}
function throttle(num,await) {
let timeout=null;
? ? return function () {
? ? ? if(timeout)
? ? ? ? ? ?return;
? ? ? ? let me=this;
? ? ? ? timeout=setTimeout(()=>{
? ? ? ? ? ?fn2.call(me,num);
? ? ? ? ? ? timeout=null;
? ? ? ? },await)
}
}
