节流阀-鼠标跟随效果案例

节流策略:顾名思义,可以减少一段时间内事件的触发频率。

就像是游戏发动技能,貂蝉一技能用过之后,没有冷却好的时候要是再点是没有办法触发技能的,而防抖就像回城,可以被打断但是可以重新回城,最后回一次城。节流执行的是触发第一次,而防抖执行的是触发的最后一次。

 完整代码:
 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #ag {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="../angel.gif" alt="" id="ag">
    <script>
        // 获取小天使元素
        var angle = $('#ag');
        // 定义一个节流阀
        var timer = null;
        // 监听鼠标移动事件
        $(document).on('mousemove', function(e) {
            // 判断是否有节流阀
            if (timer) {
                return;
            }
            // 开启延时器
            timer = setTimeout(function() {
                angle.css('left', e.pageX + 'px').css('top', e.pageY + 'px');
                console.log(111);
                // 重置timer
                timer = null;
            }, 16)
        });
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_43781887/article/details/126921416