Question

我想通过for循环执行100个动作。但它的工作速度如此之快，我想减慢这个过程，我需要在每个过程之间有1秒的差异。按照我工作的代码。

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

请帮忙。

谢谢。

Answer 1

您可以使用setTimeout

进行操作

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

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

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

success(1);

Answer 2

您可以使用 delay 和 queue

{{1}}

<强> DEMO

Answer 3

LOL ，好的这篇文章主要是为了好玩......所以不要太认真对待

这是一种完全矫枉过正的方法，但是很有趣，对吗？

点击下面的运行代码段！

当然，它在ES6中看起来最好。（下面的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);

承认，这让你有点兴奋......

这是ES5版本

＆＃13;

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

＆＃13;

model = ModelA.find(model_a_id)
model.update_column(:attribute_a, model.attribute_a + attribute_b)

＆＃13;

Answer 4

您可以使用setInterval

<强> Live Demo

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

Answer 5

你真的“慢”＆＃39;下载代码，因为它会使UI无响应。

相反，为了达到您的要求，您可以使用setTimeout()，如下所示：

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

Example fiddle

如何减慢Jquery中的For循环？

5 个答案: