i am sorry this question might be one of those "stupid questions". I have this round progressbar that works perfectly, when i click the button named "animateButton". But I want to start the progressbar with a function call, but the function does not have a name, because its recursive in the progressbar, i guess. How do I make the function to start the progress when i call a function like this startIt()?.
$(function() {
var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
$topLoader.setValue(Math.round(val * 100.0));
}});
var topLoaderRunning = false;
$("#animateButton").click(function() {
if (topLoaderRunning) {
return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 500; //100=2.7 1000=27
var animateFunc = function() {
kb += 1;
$topLoader.setProgress(kb / totalKb);
$topLoader.setValue(kb.toString() + 'kb');
if (kb < totalKb) {
setTimeout(animateFunc, 25);
} else {
topLoaderRunning = false;
}
}
setTimeout(animateFunc, 25);
});
});
I got it working as easy as this:
startLoader = function() {
var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
$topLoader.setValue(Math.round(val * 100.0));
}});
var topLoaderRunning = false;
if (topLoaderRunning) {
return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 500; //100=2.7 1000=27
var animateFunc = function() {
kb += 1;
$topLoader.setProgress(kb / totalKb);
$topLoader.setValue(kb.toString() + 'kb');
if (kb < totalKb) {
setTimeout(animateFunc, 25);
} else {
topLoaderRunning = false;
}
}
setTimeout(animateFunc, 25);
};
If I understand your question correctly, you want something like this:
$(function() {
var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
$topLoader.setValue(Math.round(val * 100.0));
}});
var topLoaderRunning = false;
var startIt = function() {
// function body...
};
$("#animateButton").click(startIt);
});
You can always assign functions to variables if you need to access them by name.
You already have all the pieces, you just need to reorder them a bit. Give your function a name, then assign that name to the click event. Then you can explicitly call the function by name at the end.
Untested code below, but I've used this principle many times.
$(function() {
var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
$topLoader.setValue(Math.round(val * 100.0));
}});
var topLoaderRunning = false;
var startIt = function() {
if (topLoaderRunning) {
return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 500; //100=2.7 1000=27
var animateFunc = function() {
kb += 1;
$topLoader.setProgress(kb / totalKb);
$topLoader.setValue(kb.toString() + 'kb');
if (kb < totalKb) {
setTimeout(animateFunc, 25);
} else {
topLoaderRunning = false;
}
}
setTimeout(animateFunc, 25);
};
$("#animateButton").click(startIt);
startIt();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.