JavaScript 函數節流

時間 2020-03-20

原文原文鏈接

其實最先看設計模式是單純的瞭解js語言自己;因此看了理解了以後仍是容易忘記;可能以後實際的工做須要才能記住吧;html

看下面:<!DOCTYPE html>ajax

<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次左右的窗口變化;顯然對性能不利;設計模式

下面看一個節流函數作的處理:api

<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>