使用javascript的潜意识快速消息

我的任务是为网站创建一个小部件，一个要求访问者输入文本或图像、持续时间（毫秒）和间隔（秒）的小部件。然后是一个jQuery代码，它根据持续时间和间隔显示和隐藏消息

支持用户输入以下数据：

var text = "Be positive";
var duration = 30 ms;
var interval = 5000 (every five seconds).

它必须等待5秒钟，然后通过显示DOM元素来显示肯定消息，然后等待30毫秒再次隐藏它

这是我的jQuery：

setInterval(
    function update(){
       $('.blink_message').toggleClass('hidden');
    },30);

我的问题是我只需要每5秒做一次？我必须在外部添加另一个设置间隔吗

---

谢谢

这是一种方法：

var text = "Be positive";
var duration = 1000; // I changed it so you're able to see the effect better
var interval = 2000;

setInterval(function(){

    $('.blink_message').text(text);
    $('.blink_message').fadeIn('fast', function(){
        setTimeout(function(){
            $('.blink_message').fadeOut('fast');
        },duration);
    });

}, interval);

工作示例：

如果30毫秒真的很重要，您应该省去效果淡出/淡出，而是使用隐藏和显示：

最后一点注意：如果需要高精度，setTimeout和setInterval函数可能不是最佳选项。这些功能的分辨率有限，有时会相差4毫秒。如果您想在现代浏览器中处理大约每秒60次的重绘事件，但这取决于设备的cpu有多忙，那么您应该研究一下。您可以使用它实现更高的分辨率计时

试试这个：

setInterval(function(){
    setTimeout(function(){
        $('.blink_message').toggleClass('hidden');
    },30);
},3000);

---

工作

您可以使用setTimeout而不是setInterval，并使用两个不同的函数隐藏和显示消息，使用正确的计时器调用另一个函数。最好将jQuery对象存储到变量中，而不是一直创建新的变量

var duration = 30;
var interval = 5000;
var blinkMessage = $('.blink_message');

function showMessage() {
    blinkMessage.removeClass('hidden');
    setTimeout(hideMessage, duration)
}

function hideMessage() {
    blinkMessage.addClass('hidden');
    setTimeout(showMessage, interval)
}

showMessage();

---

在JSFIDLE上看到这个例子：

简单的方法是使用以下逻辑：谢谢你，亲爱的，我要尝试一下，不确定这是否重要，但这种技术意味着隐藏消息和再次显示消息之间的时间是间隔-持续时间。因此，如果interval var text = "Be positive"; var duration = 30; var interval = 5000; $(document).ready(function(){ $('.blink_message').hide().text(text); setInterval(function(){ $('.blink_message').show(); setTimeout(function(){ $('.blink_message').hide(); },duration); }, interval); });

var duration = 30;
var interval = 5000;
var blinkMessage = $('.blink_message');

function showMessage() {
    blinkMessage.removeClass('hidden');
    setTimeout(hideMessage, duration)
}

function hideMessage() {
    blinkMessage.addClass('hidden');
    setTimeout(showMessage, interval)
}

showMessage();