眼睛闪烁计时器

Question

我正在创建一个带有几个吉祥物的网站，并将实现一个“眨眼计时器”，使每个吉祥物都能眨眼。

我的问题是：如何在任意语言上实现（以及持续多久？）闪烁和闪烁之间的延迟，（我可能会使用JavaScript，但现在并不重要）。

是否有关于“眨眼算法”或类似内容的资源？

编辑：我知道如何使用setTimeout和setInterval，我的问题更多的是关于算法而不是实现本身。

---

最终结果：

var blink = {
    delay: function() {
        return Math.random() * 8000 + 2000;
    },
    duration: function() {
        return 100 + Math.floor(Math.random() * 100);
    },
    blinkAgain: function() {
        return (Math.random() < .2);
    },
    betweenBliks: function() {
        return blink.duration() / 2;
    }
};

$.fn.blink = function(continueBlinking) {
    var $element = $(this);

    // Star the blink
    $element.addClass('blink');

    // Finish the blink
    setTimeout(function() {
        $element.removeClass('blink');

        // Change of blinking again
        if (blink.blinkAgain()) {
            setTimeout(function() {
                $element.blink(false);
            }, blink.betweenBliks());
        }
    }, blink.duration());

    // Continue blinking?
    if (continueBlinking) {
        setTimeout(function() {
            $element.blink(true);
        }, blink.delay());
    }
};

- Thiago Belem

---

setInterval 是一个 JavaScript 函数，它会按照指定的时间间隔重复执行一个指定的函数或代码块。这个函数接受两个参数：要执行的函数或代码块，以及每次执行之间的毫秒数延迟时间。setInterval 返回一个唯一的 ID 值，可以用于后续取消定时器。 - Blazemonger

可能是重复问题：https://dev59.com/C2ct5IYBdhLWcg3wa8s_#12115326 - Dhruvenkumar Shah

我知道如何使用setTimeout和setInterval，我的问题更多地涉及算法而不是实现本身。 - Thiago Belem

@TiuTalk你尝试过什么？你的标记是怎样的？ - Daniel A. White

@TiuTalk 其实这并没有什么算法。 - Waleed Khan

Answer 1

眨眼的速率因人而异，平均每五秒钟眼睛会眨一次。这相当于每天17000次或每年625万次。

来源

假设你有一个名为blink的函数来实现“眨眼”，你可能只需要像这样做：

setInterval(blink, 5000); // 5000ms i.e. 5s

如果您希望闪烁更具“随机性”，可以按照以下方式进行：

function blink() {
    [...] // The blinking
    setTimeout(blink, 5000 + ((Math.random() - 0.5) * 2000));
}

如果我的计算是正确的，这将以随机方式在4000至6000毫秒之间调用blink函数，鉴于Math.random()返回介于0.0和1.0之间的值，因此"Math.random() - 0.5"将介于-0.5和0.5之间。乘以2000将得到介于-1000和1000之间的值。请注意保留HTML标签。

- fresskoma

---

很好，我喜欢代码中提供了一些上下文信息。我会给你打勾。 - Hacknightly

太棒了，这就是我想要的答案 :) - Thiago Belem

Answer 2

我们往往会“人性化”像吉祥物这样的东西，因此您可以使用人类的眨眼率使吉祥物看起来更自然。

人类通常每分钟平均眨眼10次，两次眨眼之间的时间为2-10秒。[来源] 使眨眼之间的延迟随机在2到10秒之间，这将平均每分钟10次：

function blink() {
  // do the blinking stuff
  window.setTimeout(blink, Math.random() * 8000 + 2000);
}

人脑非常擅长发现模式，因此如果你让吉祥物以一定的间隔眨眼睛，游客很快就会注意到这一点，并认为眨眼看起来不自然。

检查一下它的效果。实际上正常的眨眼间隔可能并不正常，你可能需要增加间隔时间，尤其是如果你在一起展示几个吉祥物时。

- Guffa

Answer 3

你的闪烁函数可能会在DOM中移动一些内容或者像这样操作图像

var blink = function () {

   // do some work!
}

那么您可能想要使用setInterval()来处理闪烁间隔。

setInterval(blink, 3000)

请注意，setInterval 的时间单位是毫秒，因此 3000 表示“每 3 秒一次”。希望这能帮到你。如果你想让它不是每三秒就执行一次，你可以使用一个动态数字。例如，你可以编写一个名为 slowDown() 和 speedUp() 的函数，随机调用它们以设置实际的 setTimeout() 时间间隔。

关于算法，以下是描述其难度的摘录：

人类眨眼表达深层心理信息的过程具有模糊性和随机性的不确定性。提出了一种基于云理论的方法来实现虚拟人眨眼的不确定性控制。设计了眼睛最大张开角度云和眨眼间隔云。提出了一种基于云的眨眼控制算法。与确定性方法进行比较的结果表明，所提出的算法可以生成具有随机眼睛最大张开角度和眨眼间隔的眨眼控制曲线，以实现眨眼的不确定性控制。

- Hacknightly

---

正如我在上次编辑中所提到的：我知道如何使用setTimeout和setInterval，但我在这里的问题更多关于算法而不是实现本身。 - Thiago Belem