JavaScript 函数节流

Posted 2020-11-04 七分sunshine!

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 函数节流相关的知识，希望对你有一定的参考价值。

其实最早看设计模式是单纯的了解js语言本身;所以看了理解了之后还是容易忘记;可能之后实际的工作需要才能记住吧;

看下面:<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    
</body>

</html>
<script>
    window.onresize=function(){
        con();
    };

    function con(){
        console.log("aaaaa")
    }
</script>

上述情况,浏览器大概每秒会检查到10次左右的窗口变化;显然对性能不利;

下面看一个节流函数做的处理:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    
</body>

</html>
<script>

window.onresize=function(){
    throttle(con,300);
};

function con(){
    console.log("aaaaa")
}

//节流器函数;
function throttle() {
　
　　var first_param = arguments[0], methods,time_param;
　
　　if (typeof first_param === ‘boolean‘) {
　　　
　　　　methods = arguments[1];

　　　　methods.throttleTimeId && clearTimeout(methods.throttleTimeId);
　　　　} else {
　　　　
　　　　methods = first_param;
　　　　
　　　　arguments.callee(true, methods); //arguments.callee指向函数的引用; //无闭包,立即销毁内存;

　　　　time_param = arguments[1]||500//默认500毫秒; //函数的argument指向的是 实参;

　　　　// window.throttle(true, methods); //arguments.callee指向函数的引用;
　　　　//为函数绑定计时器，延迟执行
　　　　methods.throttleTimeId = setTimeout(function () {
　　　　　　methods();
　　　　},time_param)
　　}
}


</script>