Question

所以我在这里尝试做的是制作一个每2秒生成一个新的随机颜色和大小框的页面，当我点击它们时会删除它。问题是，第一个框创建没有问题，但在那之后，我得到了我的函数＆＃34; makeDiv＆＃34;没有每2秒定义一次。

我错过了什么吗？

setInterval('makeDiv', 2000);

(function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100)

    $("div").click(function() {
        $(this).remove();
    });

})();

Answer 1

问题是..你在setinterval中使用makeDiv作为一个函数，但你在(function(){});中使用它并且它看起来像$(document).ready()中所以它只是第一次工作..它自己工作文档准备好后不在setinterval中工作..所以我在这里做的只是做一个明确的功能.. function makeDiv(){}而不是(function makeDiv(){}());和关于

$(document).on('click' , 'div',function() {
    $(this).remove();
});

我更喜欢使用代码一次不用每个setInterval重复它所以我在函数外面使用了这个代码，而不是像在

中那样使用它

$("div").click(function() {
    $(this).remove();
});

<强>演示

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

使用动画更新演示

$(document).on('click' , 'div',function() {
    $(this).remove();
});

setInterval('makeDiv()', 2000);

function makeDiv() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100).animate({'left' : '0px', 'right': $(window).width() - divsize} , 3000).animate({'right' : '0px', 'left': $(window).width() - divsize} , 3000);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 2

不确定为什么需要IIFE 所以我把它作为一个正常的功能＆amp;调用

像这样的setInterval

setInterval(makeDiv, 2000);

选中此jsFiddle

Answer 3

这可能不是理想的答案，但是，这是您可以尝试的替代方案：

setInterval(function() {
    var divsize = ((Math.random() * 100) + 50).toFixed();
    var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width': divsize + 'px',
        'height': divsize + 'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position': 'absolute',
        'left': posx + 'px',
        'top': posy + 'px',
        'display': 'none'
    }).appendTo('body').fadeIn(100)

}, 2000);

$("div").click(function() {
    $(this).remove();
});

jQuery - 在间隔上创建新的div

3 个答案: