以下是我在单击“技能”类时尝试运行的脚本。只有在点击后它才能运行一次，无论点击多少次都不会运行
您可以在此处看到它：http://jsfiddle.net/tvEC5/
我想修改它，添加滚动功能并使其仅在单击或滚动时执行一次，之后不应执行。
谢谢。
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);
});
答案 0 :(得分：0)
如果你说的是我认为你在说什么，你想要内心的内容，但你想要滚动或点击进行。
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
});
答案 1 :(得分：0)
将您点击的代码移动到一个函数中，让callit＆＃34;函数playGauge（evt）＆＃39;，然后将其作为处理程序添加到您要对其进行处理的每个事件中：
$('.skills).click(playGauge)
$('.skills).hover(playGauge)
//... etc.
答案 2 :(得分：0)
你的解释真的很混乱。但我想您要说的是代码工作正常，但您希望click更改为scroll。
您可以复制click并更改
$('.skills').on('click', function () {
到这个
$(window).scroll(function () {