zoukankan      html  css  js  c++  java
  • 防抖和节流

    首先先了解概念:

    防抖和节流:限制当前函数的执行次数

    节流和防抖都是在降低频率

    防抖: 通过setTimeout 的方式,在一定时间间隔内,将多次触发变成一次触发。

    举个列子:

    一个按钮,每点击一次会打印出1,用户不断地点击,就会不断的去发起请求,这会很浪费资源,可以防抖进行优化。

    <body>
     <button id="submit">提交</button>
     <script>
     var sub = document.getElementById('submit')
     var timer=null
     sub.onclick=function(){
       clearTimeout(timer) //作用是在下一次点击开始前,把上一个定时器关闭,保证最后只保证一个
       timer = setTimeout(()=>{
        console.log("发送请求")
       },1000)
     }
    </script>
    </body>
    
    
    

    上面的代码就是防抖的代码列子,防抖在规定时间内,只会执行一次操作,应用场景可以是搜索栏中的提示、滚动条的滚动等。

    节流: 规定一个判断,改变这个判断即可,这个判断叫做节流阀,同时也是用setTimeout

    <body>
        <button id="submit">提交</button>
        <script>
            var sub = document.getElementById('submit')
            var flage = true
            sub.onclick = function() {
                if (flage) {
                    flage = false
                    console.log(1);
                    setTimeout(() => {
                        flage = true
                    }, 1000)
                }
    
    
            }
        </script>
    </body>
    

    这里的flage就是节流阀,用flage去判断

    节流用的场景可以是商品预览图的放大镜效果时,不必每次鼠标移动都计算位置

    防抖和节流的区别

    防抖:不用在意过程,在一段时间内,只有最后一次产生效果

    节流:一段时间内可以产生多个效果,只不过是降低了频率

    扩展

    防抖和节流不想写的时候可以引用 Lodash.js

    https://www.lodashjs.com/

    防抖的用法

    image-20210629174232230

    节流的用法

    image-20210629174251669

    原型和原型链的简单了解

    原型和原型链本来可以不做记录,但是怕我忘记,简单的记录一下

    先从对应的名字开始。

    原型:propotype

    原型链:

    _proto_
    

    从属关系。

    prototype 从属与函数,是函数的属性,每一个函数都有默认的prototype(原型属性) 普通对象 {}

    proto 对象的一个属性 object: 也是一个对象{}

    每一个对象的_proto_保存着该对象的构造函数prototype

    ?.constructor->实列化?对象的构造函数

    继承方式可以用原型链继承

    image-20210629184148844

  • 相关阅读:
    Vue.config.productionTip = false;
    Node学习笔记
    Redux学习笔记------容器组件与展示组件分离
    Redux学习笔记------数据流
    Redux学习笔记------store
    Redux学习笔记------reducer
    Redux学习笔记------action
    Redux学习笔记------基础介绍
    过滤emoji表情
    textarea自适应高度
  • 原文地址:https://www.cnblogs.com/AFBF/p/14951491.html
Copyright © 2011-2022 走看看