I want to Perform 100 actions by for loop. But its working so fast and I want to slow down the process, I need 1 second difference between each of the process. following the code on which I am working.
for(var i=1;i<=100;i++)
{
$("#span"+i).html("Success");
}
Please help on this.
Thank You.
Here's on way you can do it using setTimeout
function success(i) {
if (i > 100) return;
$("#span" + i).html("success");
setTimeout(function() {
success(i+1);
}, 1000);
}
success(1);
LOL, ok this post is mostly for fun... So don't take it too seriously
This is a completely overkill way to do it, but sorta fun, right ?
Click Run code snippet below !
It looks best in ES6, of course. (ES5 below)
let uncurry = f => (x,y) => f(x)(y);
let foldl = f => xs => xs.reduce(uncurry(f));
let comp = f => g => x => f(g(x));
let compN = foldl(comp);
let doloop = procs => {
let makeLoop = f => {
let loop = [];
loop[0] = comp(f)(boxcaller)(loop);
return loop[0];
}
return makeLoop(compN(procs));
}
let selector = prefix => k => x => k({id: x, sel: prefix+x});
let select = $ => k => x => k({id: x.id, elem: $(x.sel)});
let notifier = message => k => x => { x.elem.html(message); k(x); }
let waiter = time => k => x => setTimeout(() => k(x), time);
let nextUntil = limit => k => x => x.id <= limit ? k(x.id + 1) : void 0;
let boxcaller = k => x => k[0](x);
let throttleNotices = prefix => $ => message => time => limit => doloop([
selector(prefix),
select($),
notifier(message),
waiter(time),
nextUntil(limit)
]);
var run = throttleNotices("#span")(jQuery)("success")(1000)(10);
run(1);
Admit it, that excites you a little bit...
Here's the ES5 version
"use strict";
var uncurry = function uncurry(f) {
return function (x, y) {
return f(x)(y);
};
};
var foldl = function foldl(f) {
return function (xs) {
return xs.reduce(uncurry(f));
};
};
var comp = function comp(f) {
return function (g) {
return function (x) {
return f(g(x));
};
};
};
var compN = foldl(comp);
var doloop = function doloop(procs) {
var makeLoop = function makeLoop(f) {
var loop = [];
loop[0] = comp(f)(boxcaller)(loop);
return loop[0];
};
return makeLoop(compN(procs));
};
var selector = function selector(prefix) {
return function (k) {
return function (x) {
return k({ id: x, sel: prefix + x });
};
};
};
var select = function select($) {
return function (k) {
return function (x) {
return k({ id: x.id, elem: $(x.sel) });
};
};
};
var notifier = function notifier(message) {
return function (k) {
return function (x) {
x.elem.html(message);k(x);
};
};
};
var waiter = function waiter(time) {
return function (k) {
return function (x) {
return setTimeout(function () {
return k(x);
}, time);
};
};
};
var nextUntil = function nextUntil(limit) {
return function (k) {
return function (x) {
return x.id <= limit ? k(x.id + 1) : void 0;
};
};
};
var boxcaller = function boxcaller(k) {
return function (x) {
return k[0](x);
};
};
var throttleNotices = function throttleNotices(prefix) {
return function ($) {
return function (message) {
return function (time) {
return function (limit) {
return doloop([
selector(prefix),
select($),
notifier(message),
waiter(time),
nextUntil(limit)
]);
};
};
};
};
};
var run = throttleNotices("#span")(jQuery)("success")(1000)(10);
run(1);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="span1">waiting...</span>
<span id="span2">waiting...</span>
<span id="span3">waiting...</span>
<span id="span4">waiting...</span>
<span id="span5">waiting...</span>
<span id="span6">waiting...</span>
<span id="span7">waiting...</span>
<span id="span8">waiting...</span>
<span id="span9">waiting...</span>
<span id="span10">waiting...</span>You can't really 'slow' down code, as it would make the UI unresponsive.
Instead, to achieve what you require you could use setTimeout(), like this:
function performAction(i) {
setTimeout(function() {
i++;
$("#span" + i).html("Success");
i <= 100 && performAction(i);
}, 1000);
}
performAction(0);
