Question

我尝试创造效果。问题是效果的持续时间。为了我的效果我想传递参数持续时间。这将设置效果运行的间隔。 jquery如何在他们的效果上做到这一点？我尝试使用setTimeout但这很复杂。

感谢您的帮助。

Answer 1

在浏览器中使用JavaScript进行UI循环的两种基本方法是setTimeout和setInterval：

setTimeout将在指定的间隔（以毫秒为单位）后调用函数。时间不一定精确，你通常不能在10ms内在浏览器上安排一些东西。它会返回一个句柄，您可以通过clearTimeout取消回调（如果在它发生之前就已经开始）。要进行循环，可以在处理完前一个循环后设置新的超时。

setInterval将以给定的间隔（也以毫秒为单位）重复调用函数，最小值为10ms。它返回一个句柄，您可以通过clearInterval来停止重复。你不必每次都开始一个新的，解释器为你做循环。

您选择的内容取决于您尝试做什么和个人偏好。请注意，setInterval中的时间间隔是从回调调用时开始计算的，而如果您在回调处理结束时安排新的setTimeout，则显然是从那时起安排。如果您的处理需要很长时间，那么差异就很重要（但同样，您想要的完全取决于您正在解决的问题）。

我认为“持续时间”是作为整个运行的效果需要多长时间才能运行，这将超出其中任何一个 - 它将是效果代码的函数。我见过的大多数效果都是按步骤运行的（不知道你会怎么做）并根据你给出它们的持续时间以及作者认为需要的最大粒度来确定要采取多少步骤。例如，如果你想要它，从白色渐变到黑色可能需要255步，但这可能太慢了（我们将抛开“缓和”的讨论，根据人眼和大脑如何看待它们来调整步骤）。如果你被告知要总共花费半秒钟，你可以按照步骤每50分钟进行10步，但如果你有一整秒的话，你可以以相同的间隔分20步完成。等

Answer 2

基本规则position = Initial_value + (change_in_time * start_time) / duration

function animate(duration){
  var startTime = new Date().getTime();
  var tmr = setInterval(function() {
      var elapsedTime = new Date().getTime() - startTime;
      if (elapsedTime < duration) {
        var f = elapsedTime / duration;
         // Here " f " is in an important parameter in our animation
      }else {
        clearInterval(tmr);
      }
  }, 1);
}

尝试演示： http://jsbin.com/eruko4

注意：在我的示例中（演示）我正在考虑Inital value as '0';

Answer 3

他们似乎使用了setInterval：http://github.com/jquery/jquery/blob/master/src/effects.js#L340

setTimeout的问题

3 个答案: