Question

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

支持用户输入此数据：

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

它必须等待5秒钟，然后显示消息＆＃34;积极的＆＃34;通过显示DOM元素，然后等待30毫秒再次隐藏它。

这是我的jQuery：

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

我的问题是我需要每隔5秒才能实现这个目标吗？我必须在外面添加另一个setInterval吗？

谢谢

Answer 1

这是一种方法：

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

工作示例：http://jsfiddle.net/thijs_s/fzb9nck4/

如果30ms真的很重要，你应该省去效果（fadeIn / fadeOut）并改用hide()和show()：

var text = "Be positive";
var duration = 30;
var interval = 5000;

setInterval(function(){

    $('.blink_message').text(text);
    $('.blink_message').show();
    setTimeout(function(){
        $('.blink_message').hide();
    }, duration);

}, interval);

最后一点：如果需要高精度，setTimeout和setInterval函数可能不是最佳选择。这些功能的分辨率有限（有时可达4ms）。如果你想处理重绘事件的级别（在现代浏览器中每秒大约60次，但取决于设备的cpu有多忙），你应该研究requestAnimationFrame()。您可以使用它实现更高分辨率的计时。

Answer 2

您可以使用setTimeout而不是setInterval，并使用2个不同的函数来隐藏和显示消息，使用正确的计时器调用另一个。将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();

在JSFiddle上查看此示例：http://jsfiddle.net/2bv4w62u/1/

Answer 3

试试这个：

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

Answer 4

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

});

工作Fiddle

使用javascript的潜意识快速消息

4 个答案: