zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    LintCode Python 简单级题目 488.快乐数
    LintCode Python 简单级题目 100.删除排序数组中的重复数字 101.删除排序数组中的重复数字II
    LintCode Python 简单级题目 373.奇偶分割数组
    LintCode Python 简单级题目 39.恢复旋转排序数组
    LintCode Python 简单级题目 35.翻转链表
    LintCode Python 简单级题目 451.两两交换链表中的节点
    LintCode Python 简单级题目 174.删除链表中倒数第n个节点
    aws查看官方centos镜像imageid
    linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
    php配置优化-生产环境应用版
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14896932.html
Copyright © 2011-2022 走看看