Как замедлить цикл в JQuery?

Question

Я хочу выполнить 100 действий для цикла. Но его работа так быстро, и я хочу замедлить процесс, мне нужно разницу в 1 секунду между каждым процессом. следуя коду, над которым я работаю.

for(var i=1;i<=100;i++) 
    { 
     $("#span"+i).html("Success"); 
    } 

Пожалуйста, помогите с этим.

Thank you.

Answer 1

Вот на пути вы можете сделать это с помощью setTimeout

function success(i) { 
    if (i > 100) return; 

    $("#span" + i).html("success"); 

    setTimeout(function() { 
    success(i+1); 
    }, 1000); 
} 

success(1); 

Answer 2

Вы можете использовать setInterval

Live Demo

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

Answer 3

Вы не можете на самом деле 'медленный' вниз код, а это сделает пользовательский интерфейс невосприимчивым.

Вместо того, чтобы добиться того, что вам требуется, вы можете использовать setTimeout(), как это:

function performAction(i) { 
    setTimeout(function() { 
     i++; 
     $("#span" + i).html("Success"); 
     i <= 100 && performAction(i); 
    }, 1000); 
} 
performAction(0); 

Example fiddle

Answer 4

Вы можете использовать delay и queue

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

DEMO

Answer 5

LOL, ки этот пост в основном для удовольствия ... Так что не принимайте это слишком серьезно

Это совершенно избыточен способ сделать это, но Сорта весело , правильно ?

Нажмите Код фрагмента кода ниже!

Он выглядит лучше всего в ES6, конечно. (ES5 ниже)

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

Согласись, что волнует вас немного ...

---

Вот версии ES5

"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>