08. 函数节流和防抖


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            height: 500%;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
    //面试题：什么是函数节流？什么是函数防抖
    /*
        函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
        - 有个需要频繁触发的函数，出于优化性能的角度，在规定时间内，只让函数触发的第一次生效，后面不生效。
    */
    /*
     *节流函数
     * fn 要被节流的函数
     * delay 规定的时间
    */
    function throlle(fn,delay){
        //记录上一次触发时间
        var lastTime=0;
        return function(){
            //记录当前触发时间
            var nowTime=Date.now();
        
            if(nowTime-lastTime>delay){
                //修正this指向问题
                fn.call(this);
                // 同步函数
                lastTime=nowTime;
            }
        }
    }
    document.onscroll=throlle(function(){console.log('onscroll事件被触发'+Date.now());},2000);
</script>
</body>
</html>

(2). 防抖函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            height: 500%;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
   
    /*
        防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效
    */
    /*
     *防抖函数
     * fn 要被防抖的函数
     * delay 规定的时间
    */
    function debounce(fn,delay){
        //记录上一次触发时间
        var timer=null;
        return function(){

            //清除上一次的延迟
            clearTimeout(timer);

            //重新设置延时器
            timer=setTimeout(function(){
                //修正this指向问题
                fn.apply(this);
            },delay);
        }
    }
    document.getElementById('btn').onclick=debounce(function(){console.log('点击事件被触发了'+Date.now());},1000);
</script>
</body>
</html>

08. 函数节流和防抖

猜你喜欢