Question

我想创建一个效果，当移动鼠标滚轮时，页面的图像和颜色会发生变化。我已经实现了这一点，但我现在面临的问题是效果几乎是瞬间的，只是轮子的最轻微的动作和触发事件。

如何使鼠标滚轮事件响应（渐进）here（效果有点受欢迎，抱歉我能找到更好的例子）。在此先感谢您的帮助。对不起解释或琐碎的问题提前抱歉。

function mouseHandler(e) {
    console.log(e.originalEvent.deltaY);

    // This is where my problem is, I cannot think of another way besides this.
    if (e.originalEvent.deltaY < 0) {
        position = position === 0 ? pages.length - 1 : position - 1;
    } else {
        position = (position + 1) % pages.length;
    }

    $(".banner_image").fadeOut(0);

    if (pages[position] === "../../public/images/Avatar.png") {

        $("body").css("background-color", "#00a8ff");

        $(".navigation-wrapper").css("background-color", "#00a8ff");

        $(".banner").css({
            position: "fixed",
            top: "50%",
            left: "25%",
            transform: "(-50%, -50%)"
        });

    }
    else if (pages[position] === "../../public/images/Burger.png") {
        $("body").css("background-color", "#e84118");

        $(".navigation-wrapper").css("background-color", "#e84118");

        $(".banner").css({
            position: "fixed",
            top: "50%",
            left: "25%",
            transform: "(-50%, -50%)"
        });
    }
    else if (pages[position] === "../../public/images/IceCream2.png") {
        $("body").css("background-color", "#f1c40f");

        $(".navigation-wrapper").css("background-color", "#f1c40f");

        $(".banner").css({
            position: "fixed",
            top: "50%",
            left: "25%",
            transform: "(-50%, -50%)"
        });

    }
}

Answer 1

您可能正在寻找去抖动或节流方法。

Debounce 将确保您的代码在一组调用结束时只运行一次，即使该函数被多次调用也是如此。

Throttle 将确保一个函数每秒最多运行X次，无论它被调用的次数如何。

http://underscorejs.org/#debounce

http://underscorejs.org/#throttle

如何让“鼠标滚轮”事件监听器功能响应性降低？

1 个答案: