Question

以下是我在单击“技能”类时尝试运行的脚本。只有在点击后它才能运行一次，无论点击多少次都不会运行

我想修改它，添加滚动功能并使其仅在单击或滚动时执行一次，之后不应执行。

谢谢。

var skillsClicked = false;   // <----  Add this OUTSIDE of the click function
$('.skills').on('click', function () {
    if (skillsClicked === true) return false;  // <---- Then add this
    skillsClicked = true;     // <-----  And the final update
    var gaugeConfig = {
        "canvasHolderId": "HTML",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#2ECC71",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "7.5"
    };
    var gaugeConfig1 = {
        "canvasHolderId": "CSS",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#2ECC71",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "6.5"
    };
    var gaugeConfig2 = {
        "canvasHolderId": "JS",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#27AE60",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "7"
    };
    var gaugeConfig3 = {
        "canvasHolderId": "JQ",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#F1C40F",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "7"
    };
    var gaugeConfig4 = {
        "canvasHolderId": "BT",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#F1C40F",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "8"
    };
    var gaugeConfig5 = {
        "canvasHolderId": "XML",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#F39C12",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "7.5"
    };
    var gaugeConfig6 = {
        "canvasHolderId": "JAVA",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#E67E22",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "9"
    };
    var gaugeConfig7 = {
        "canvasHolderId": "MVC",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#E67E22",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "8.5"
    };
    var gaugeConfig8 = {
        "canvasHolderId": "SP",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#D35400",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "6.5"
    };
    var gaugeConfig9 = {
        "canvasHolderId": "WB",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#E74C3C",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "7"
    };
    var gaugeConfig10 = {
        "canvasHolderId": "SQL",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#E74C3C",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "8"
    };
    var gaugeConfig11 = {
        "canvasHolderId": "HB",
            "width": "150",
            "height": "150",
            "circleColor": "#222",
            "arcColor": "#C0392B",
            "canvasFillColor": "#333",
            "textPosition": "inside",
            "skillLevel": "6.5"
    };

    function drawGauge(gc) {
        var W = gc.width;
        var H = gc.height;
        var degrees = 0;
        var new_degrees = 0;
        var difference = 0;
        var color = gc.arcColor;
        var bgcolor = gc.circleColor;
        var text = gc.skillLevel;
        var animation_loop, redraw_loop;
        var me = this;
        var canvasHolder = document.getElementById(gc.canvasHolderId);
        var canvasCreator = document.createElement("canvas");
        canvasCreator.id = _randomId();
        canvasCreator.width = gc.width;
        canvasCreator.height = gc.height;
        canvasHolder.appendChild(canvasCreator);
        var canvas = document.getElementById(canvasCreator.id);

        function _randomId() {
            var d = new Date();
            return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds() * Math.random();
        }

        function _init() {
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, W, H);
            ctx.beginPath();
            ctx.strokeStyle = bgcolor;
            ctx.lineWidth = 15;
            ctx.arc(W / 2, H / 2, 50, 0, Math.PI * 2, false); //you can see the arc now
            ctx.stroke();
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 15;
            ctx.arc(W / 2, H / 2, 50, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();
            ctx.fillStyle = color;
            ctx.font = "30px bebas";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 12);
        }

        function _animate_to() {
            if (degrees == new_degrees) clearInterval(animation_loop);
            if (degrees < new_degrees) degrees++;
            else degrees--;
            _init();
        }

        function _draw() {

            if (typeof animation_loop !== 'undefined') clearInterval(animation_loop);

            new_degrees = Math.round((text * 3600) / 100);
            difference = new_degrees - degrees;

            animation_loop = setInterval(function () {
                _animate_to();
            }, 1000 / difference);
        }
        _draw();
    }
    new drawGauge(gaugeConfig);
    new drawGauge(gaugeConfig1);
    new drawGauge(gaugeConfig2);
    new drawGauge(gaugeConfig3);
    new drawGauge(gaugeConfig4);
    new drawGauge(gaugeConfig5);
    new drawGauge(gaugeConfig6);
    new drawGauge(gaugeConfig7);
    new drawGauge(gaugeConfig8);
    new drawGauge(gaugeConfig9);
    new drawGauge(gaugeConfig10);
    new drawGauge(gaugeConfig11);
});

Answer 1

如果你说的是我认为你在说什么，你想要内心的内容，但你想要滚动或点击进行。

var skillsClicked = false;   // <----  Add this OUTSIDE of the click function
$('.skills').on('click scroll', function () {
    if (skillsClicked === true) return false;  // <---- Then add this
    skillsClicked = true;     // <-----  And the final update
    //rest of your code
});

Answer 2

将您点击的代码移动到一个函数中，让callit＆＃34;函数playGauge（evt）＆＃39;，然后将其作为处理程序添加到您要对其进行处理的每个事件中：

$('.skills).click(playGauge)
$('.skills).hover(playGauge)
//... etc.

Answer 3

你的解释真的很混乱。但我想您要说的是代码工作正常，但您希望click更改为scroll。

您可以复制click并更改

$('.skills').on('click', function () {

到这个

$(window).scroll(function () {

Javascript-Jquery - 如何在单击滚动事件时仅调用一次函数

3 个答案: