手写节流和防抖函数

最新推荐文章于 2024-05-27 20:46:11 发布

@笑对人生@

最新推荐文章于 2024-05-27 20:46:11 发布

阅读量172

点赞数 1

分类专栏：前端面试题文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_55808645/article/details/116382655

版权

前端面试题专栏收录该内容

19 篇文章 1 订阅

订阅专栏

防抖原理：

事件响应函数在一段时间后才执行；
如果在这段时间内再次使用，则会重新计算执行事件；
当预定时间内没有再次调用用该函数，则执行该函数；

//html
<!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>
    <div id="app" style="background-color: #000; height: 100px;text-align: center;color: white;"></div>
    <!-- <script src="https://underscorejs.net/underscore.js"></script> -->
    <script src="./debounce防抖函数.js"></script>
    <script>
        let count = 0;
        // 演示时间如何发生的
        let container = document.querySelector("#app")
        function tryDing(e){
            console.log(e);
            console.log(this);//指向当前函数 ====》this演变成了为当前document
            // 肯会做回调或者ajax请求
            container.innerHTML = count++;
        }
        // 高阶函数鼠标移入 html变化
        // container.onmousemove = _.debounce(tryDing,200,false)//false默认一段时间后执行  true时立即执行
        container.onmousemove = debounce(tryDing,200)
    </script>
</body>
</html>

//防抖函数js
function debounce(fn,timer,data){//参数要执行的函数，和时间,数据
    let timeOut;
    return function(){
        // console.log(this); //指向document
        /*Arguments [MouseEvent, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        * 0: MouseEvent {isTrusted: true, screenX: 282, screenY: 286, clientX: 213, clientY: 81, …}
        *  callee: ƒ ()
        * length: 1
        * Symbol(Symbol.iterator): ƒ values()
        * __proto__: Object
        */
        // console.log(arguments);
        let args = arguments;
        // 为了改变内部this的指向问题
        let conTent = this;
        clearTimeout(timeOut)
        if(data){
            // 立即执行
            let callout = !timeOut;
            timeOut = setTimeout(()=>{
                timeOut = null;
            })

            if(callout) fn.apply(conTent,args)
        }else{
            // 延迟执行
            timeOut = setTimeout(function(){
                fn.apply(conTent,args)//this的指向改变了为当前document
            },timer)
        }
        
    }

}

节流原理：

当多次触发事件，每隔一段时间之后，只会执行一次事件；

//html
<!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>Document</title>
</head>
<body>
    <div id="app" style="background-color: #000; height: 100px;text-align: center;color: white;"></div>
    <button id="btn">执行节流</button>
    <script src="https://underscorejs.net/underscore.js"></script>
    <!-- 节流函数 多次触发事件函数时，结果是两秒后执行一次，提高性能，节约资源 -->
    <script src="./thottle.js"></script>
</body>
</html>

//节流js
let count = 0;
// 演变时间时如何频繁发生的
let container = document.querySelector("#app");
let btn = document.querySelector("#btn");

function doSomeThing(e){
    console.log(e);//event 指向问题

    // 改变执行函数内部this的指向
    console.log(this);

    // 肯会做回调或者ajax请求
    container.innerHTML = count++;
    return "想要的结果"
}
container.onmousemove = _.throttle(doSomeThing, 2000,{
    leading:true,//立即执行
    trailing:false
})