CODEWITHSUNDEEP
jquery
Anand agrawal
Anand agrawal

Reputation: 523

How to Slow down For-loop in Jquery?

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.

Upvotes: 0

Views: 1597

Answers (5)

Mulan
Mulan

Reputation: 135227

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>

Upvotes: 1

Amit Soni
Amit Soni

Reputation: 1427

You can use delay and queue

for(var i=1;i<=6;i++)
{
    $("#span"+i).delay(i*1000).queue(function(){
        $(this).html("Success");
    });
}

DEMO

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337570

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);

Example fiddle

Upvotes: 0

Adil
Adil

Reputation: 148120

You can use setInterval

Live Demo

var counter = 0;
var i = setInterval(function(){
    // do your thing
    $("#span"+counter++).html("Success");
    if(counter === 100) {
        clearInterval(i);
    }
}, 1000);

Upvotes: 0

maček
maček

Reputation: 77778

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);

Upvotes: 4

Related Questions