我想在图像标签之间添加延迟。我能怎么做？

Question

我的项目：jsFiddle

setTimeout(function() {


for (var i = 0; i < 15; i++) {


    $('.rastgele').append('<img class="g59" src="https://cdn.intgrl.co/G59/static/images/window.png">');


}



$('.g59').each(function(index) {

    $(this).css({
        left: ((Math.random() * $('body').width())),
        top: ((Math.random() * $('body').height())),

    });

});


/*$('.g59').delay(5000).queue(function(next) {
    $(this).show();
    next();
});*/

}, 2000);

但是没用。我想点赞 https://g59records.com/ 我想在每个 img 标签之间间隔半秒。我添加了延迟，我使用了 setTimeout 或 setInterval，但它对我不起作用。我能做什么伙计们？请帮我。抱歉我的英语不好。

Answer 1

不需要for循环，你可以设置Interval和counter达到15时停止interval。

var counter = 0;
var intervalId = setInterval(function() {

    if (counter > 15) {
        clearInterval(intervalId);
        return false;
    }

    var img = document.createElement("img");
    img.src = "https://cdn.intgrl.co/G59/static/images/window.png";
    img.className = "g59";
    $('.rastgele').append(img);
    $(img).css({
        left: ((Math.random() * $('body').width())),
        top: ((Math.random() * $('body').height())),

    });
    counter++;

}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rastgele"></div>

Answer 2

而不是 setTimeout 你需要使用 setInterval 来一次又一次地调用它。

var imagesOnWindow=20;
var i=1;
var start
start = setInterval(function() {
        var left=((Math.random() * $('body').width()));
        var top=((Math.random() * $('body').height()));
        var _img=$("<img/>",{
            class:"g59",
            src:"https://cdn.intgrl.co/G59/static/images/window.png",
        });
        $(_img).css('top', top);
        $(_img).css('left', left);
        console.log(_img);
        $('.rastgele').append(_img);
        i++;
        if(i>imagesOnWindow)
          clearInterval(start);
        }, 1000);

你可以看到一个工作示例here

Answer 3

尝试使用这个：

    for (var i = 0; i < 15; i++) {
        (
         function(i) {setTimeout(function() {
            var left = Math.random() * $('body').width();
            var top = Math.random() * $('body').height();
            $('.rastgele').append('<img class="g59" style="left:'+left+'px;top:'+top+'px;" src="https://cdn.intgrl.co/G59/static/images/window.png">');

          }, 500*i)
   })(i);  

}

我想在图像标签之间添加延迟。我能怎么做？

I want to add delay between image tags. How can i do?

javascript

jquery

function

delay

settimeout