函数节流和函数防抖

2019-04-25 06:52:41来源：博客园阅读 ()

函数节流：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：当某个事件一直在触发（onscroll），设置一个间隔时间，判断当前调用时间与上次调用时间差值是否大于间隔时间，若大于，调用目标函数，反之，将当前时间赋值给上次调用时间，接着循环。

应用场景：改善调用onscroll事件时，一直监控页面行为。在滚动过程中，每隔一段时间在去计算这个判断逻辑。而函数节流所做的工作就是每隔一段时间去执行一次原本需要无时不刻地在执行的函数，所以在滚动事件中引入函数的节流是一个非常好的实践。

代码实现：

let startTime = Date.now(); //开始时间
let time = 500; //间隔时间
let timer;
window.onscroll = function throttle(){
    let currentTime = Date.now();
    if(currentTime - startTime >= time){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
        startTime = currentTime;
    }else{
        clearTimeout(timer);
        timer = setTimeout(function () {
            throttle()
        }, 50);
    }
}

函数防抖：js中，多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。应用场景：注册时，验证用户输入的用户是否已占用，未使用函数防抖技术时，一般做法是在用户每输入一个符号后，进行一次ajax请求，如此一来，不仅对服务器的压力增大了，对用户体验也未必比原来的好。而理想的做法应该是这样的，当用户输入第一个字符后的一段时间内如果还有字符输入的话，那就暂时不去请求判断用户名是否被占用。直到用户停止输入一段时间（自己设定一个时间参数），再去触发ajax请求。

代码实现：

源代码：

<!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>
    <style>
        .input{
            width:200px;
            height:50px;
        }
    </style>
</head>
<body>
    <input type="input" class="input" />
    <p></p>
</body>
<script>
    var input = document.querySelector(".input");

    var p = document.querySelector("p");

    input.oninput =function(){
        throttle(changeTip);
    }

    function changeTip(){

        var value = input.value;

        if(value=='1'){
            p.innerHTML = "恭喜！该用户名还未被注册！";  
        }else{
            p.innerHTML = "该用户名已被注册！";  
        }
    }
    function throttle(method,context){
        clearTimeout(method.tId);

        method.tId = setTimeout(function(){

            method.call(context)

        },1000)
    }
</script>
</html>