函数防抖和函数节流 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数防抖和节流</title>
</head>
<style>
    .float {
        float: left;
        width: 200px;
        height: 200px;
        border: 1px solid;
        margin: 5px;
    }
</style>

<body>
    <div class="float" id="one">
        没有处理
        <div id="div1"></div>
    </div>

    <div class="float" id="two">
        函数节流
        <div id="div2"></div>
    </div>

    <div class="float" id="there">
        函数防抖
        <div id="div3"></div>
    </div>

</body>
<script>
    // 没有处理
    var one = document.getElementById('one');
    one.onmousemove = function (ev) {
        getxy(ev, 'div1');
    }

    // 函数节流
    var two = document.getElementById('two');
    var tirm = true;
    two.onmousemove = function (ev) {
        if (!tirm) {
            return;
        }
        tirm = false;
        setTimeout(() => {
            tirm = true;
            getxy(ev, 'div2');
        }, 1000)
    }

    // 函数防抖
    var there = document.getElementById('there');
    var setstate = false;
    there.onmousemove = function (ev) {
        clearTimeout(setstate);
        setstate = setTimeout(() => {
            getxy(ev, 'div3');
        }, 1000);
    }

    // 获取坐标
    function getxy(ev, id) {
        document.getElementById(id).innerHTML = `x:${ev.offsetX},y:${ev.offsetY}`;
    }
</script>

</html>

 

 

 可以复制上面的代码，打开页面运行，将鼠标在不同的div上移动看到不同的效果，可以清楚的看到三者区别。

posted @ 2020-01-07 11:14  Y-X南川  阅读(158)  评论(0)    收藏  举报