Skip to content

Latest commit

 

History

History
98 lines (81 loc) · 2.33 KB

防抖和节流.md

File metadata and controls

98 lines (81 loc) · 2.33 KB

防抖和节流

防抖的原理就是:你尽管触发事件,但是我一定在是按触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后才执行。总之，就是等你触发完事件n秒内不在触发事件,我才执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: rgb(9, 121, 93);
            color: rgb(238, 238, 238);
            text-align: center;
            font-size: 28px;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">0</div>
    <script>
        var box = document.querySelector('.box');
        var count = 1;
      	function getUserAction(){
            box.innerHTML = count++;
        };
        //box.onmousemove = getUserAction;
        box.onmousemove = debounce(getUserAction,1000);
    </script>
</body>
</html>

跟着描述写第一版代码：

function debounce(func,wait){
    var timer;
    return function(){
        claerTimeout(timer);
        timer = setTimeout(func,wait);
    }
}

瞬间变为1

this

如果在getUserAction函数中console.log(this)，在不使用debounce的函数的时候 this的值为:

<div class="box"><div>

如果使用debounce函数,this就指向全局。

第二版代码：

function debounce(func,wait){
    var timer;
    return function(){
        var context = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            func.apply(context);
        },wait);
    }
}

现在可以正确的指向this

第三版代码：

function debounce(func,wait){
    var tiemr;
    return function(){
        var content = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            func.apply(content,args);
        },wait)
    }
}

节流

节流原理：如果你持续触发事件,每隔一段时间,只执行一次事件。根据首次是否执行以及结束后是否执行,如果效果不同,实现的方式也不同。

关于节流的实现：两种方式,一种使用时间戳,一种是定时器