JavaScript节流

JavaScript节流

可以减少一段时间内事件的触发频率

不使用节流实现鼠标跟随效果

<script>
    $(function () {
    // 1.获取图片
    let img = $("#img");
    // 2.绑定mousemove事件
    $(document).on("mousemove", function (e) {
        // 3.设置图片的位置
        $(img).css("top", e.pageY + 'px').css("left", e.pageX +'px')
        console.log("ok");
    })
})
</script>

使用节流

<script>
    $(function () {
    // 1.获取图片
    let img = $("#img");
    // 定义节流阀
    let timer = null;
    // 2.绑定mousemove事件
    $(document).on("mousemove", function (e) {
        // 3.设置图片的位置
        // 开启延时器
        timer = setTimeout(() => {
            $(img).css("top", e.pageY + 'px').css("left", e.pageX + 'px')
            console.log("ok");
        }, 16);
    })
})
</script>