防抖与手写高阶函数

为什么要做防抖

有的操作是高频触发的，但是其实触发一次就好了，比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。在比如监听输入框输入，不应该每次都去触发监听，应该是用户完成一段输入后，再进行触发
总结:等用户高频事件完了,再进行事件操作

不开防抖

未做防抖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="myInput"/>
    <p id="txt"></p>
    <script>
    var _input=document.getElementById("myInput");/* document。getElement（）  查找数据 */
    /*oninput的作用监听输入 */
    _input.oninput=function(values){
        var shuru=values.target.value;
        console.log(shuru);

        document.getElementById("txt").innerHTML="你输入的是:"+shuru ;
    }
      </script>
</body>
</html>

开启防抖

开启防抖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inputid"/>

    <script>
       var inputdom=document.getElementById("inputid");
        inputdom.oninput=debounce(function(event){
            console.log(event.target.value);
        },500)
        function debounce(fn,delay){
            let timer=null;
            return function(){
                clearTimeout(timer);
                timer=setTimeout(()=>{
                    fn.apply(this,arguments);
                },delay)
            }
        }
    
    </script>
</body>
</html>

为什么要做节流

防抖存在一个问题，事件会一直到等到用户完成操作后一段事件再操作。如果一直操作，会一直不触发。如果这是一个按钮，点击就发送请求。如果一直点，那么请求就会一直不发出去。这里的正确思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。
总结:某个操作希望上一次的完成后再进行下一次，或者说希望隔一定时间触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="inputid"/>
    <button id="sendAxios">请求</button>
    <script> 
       var inputdom=document.getElementById("inputid");
       function throttle(fn,delay){
         let valid=true;
         return function(){
            if(valid){
                setTimeout(()=>{
                    fn.apply(this,arguments);
                    valid=true;
                },delay)
                valid=false;
            }else{
                valid=false;
            }
         } 
       }
      inputdom.oninput=throttle(function(event){
        console.log(event.target.value);
      },200)
    
    </script>
</body>

防抖和节流相同点
防抖和节流都是为了阻止操作高频触发，从而浪费性能。
防抖和节流区别
防抖是让你多次触发，只生效最后一次。适用于我们只需要一次触发生效的场景
节流是让你的操作，每隔一段时间才能触发一次。适用于我们多次触发要多次生效的场景

手写高阶函数

//手写一个高阶函数   一个类似filter的函数


 var obj={
    num1:1,
    num2:2,
    num3:3,
    num4:4,
    num5:5,
    num6:6,
    num7:7,

 }




 function findProperty(obj,fn){
    var _obj=Object.create(obj);
    var _property=[];
    for(var item in _obj){
        if(fn.call(_obj,_obj[item],item)){
            _property.push(item);
        }
    }
 }



 findProperty(obj,(value,name)=>{
    return value%2==0;
 })
posted @ 2022-07-19 19:02  我是小杨  阅读(35)  评论(0)    收藏  举报