05-防抖和节流

防抖：

<!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>防抖</title>
</head>
<body>
  <input type="text" id="inp">
</body>
</html>
<script>
var oInp = document.querySelector('#inp');
function debounce(fn,delay){
  let timer=null;
  return (params)=>{
    clearTimeout(timer);
    timer=setTimeout(()=>{
      fn.call(this,params);
      timer=null;
    },delay)
  }
}

function test(val){
  console.log(val);
}

let tempFn = debounce(test,1000)

oInp.onkeyup=function(e){
  tempFn(e.target.value);
}

</script>

节流：

<!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>节流</title>
</head>

<body>
    <input type="text" id="inp">
    <div id="box" style="height: 4000px;"></div>
</body>

</html>
<script>
    let oinp = document.querySelector('#inp');
    let oBox = document.querySelector('#box');
    let ws = new WeakSet();
    ws.add(oinp);
    ws.add(oBox);


    function throttleFn(fn, delay) {
        let timer = null;
        // let oldDate
        let oldDate = new Date().getTime();
        console.log(oldDate, "初始化原来的时间");
        return (params) => {
            let newDate = new Date().getTime();
            console.log(newDate, "初始化新的时间");
            // 现在的时间 - 原来的时间 < 定时器的延迟.说明一直在快速滚动，时间差都小于定时器延时了
            // 小于延时的话，进来就清除定时器，1.5秒后oldDate才能被赋上newDate的值
            // 那么下一次再快速滚动时候，oldDate还是最开始代码执行获得到的值，那么new - old 如果一直小于<1500毫秒的时候
            // 还是走这里的逻辑，这里的逻辑呢，又是要清除定时器。
            // 直到new - old(不变的) > 1500了后才会走else，走了else就会执行fn，然后再把现在的new 赋值给了old
            // 这个新被赋值的old，又会在快速滚动的时候重复之前操作，在new - old<1500 的时候又是清除定时器，直到new -old > 1500
            // 也就是1500毫秒后才会走else....直到滚动停止
            // 初始化的时候（还没发生滚动）已经获取了old的值，那么在触发滚动的时候就会获取到new最新的时间，最新的时间怎么也比old
            // 大于1500毫秒了吧，所以就会直接走else
            if (oldDate && newDate - oldDate < delay){ 
                clearTimeout(timer);
                timer = setTimeout(() => {
                    oldDate = newDate;     // 这两行代码注掉也无所谓，这里就是为了最后一次再触发一次（为了获取数据更准确）
                    fn.call(this, params); // else才是节流
                }, delay)
            }
            // 直到newDate - oldDate > 1500毫秒（old在初始化时候是死的，直到new变得足够大）
            else {  //else里面的才是节流
                oldDate = newDate;
                fn(params);
            }

        }
    }

    function fn(val) {
        console.log(val);
    }

    let temp = throttleFn(fn, 1500);

    oinp.onkeyup = function(e) {
        temp(e.target.value);
    }
    document.onscroll = function(e) {
        temp(e.timeStamp)
    }
</script>

 

posted @ 2021-06-17 19:30  猎奇游渔  阅读(45)  评论(0)  编辑  收藏  举报