jQuery - 在间隔上创建新的 div答案

【问题标题】：jQuery - Making new div on intervaljQuery - 在间隔上创建新的 div
【发布时间】：2016-05-12 05:01:48
【问题描述】：

所以我在这里尝试做的是创建一个页面，每 2 秒生成一个新的随机颜色和大小框，当我单击它们时将其删除。问题是，第一个框的创建没有问题，但在那之后，我收到错误消息，即我的函数“makeDiv”不是每 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();
    });

})();

【问题讨论】：

将其移出自执行函数
setInterval 在第一次调用后在窗口范围内执行函数；这就是为什么您需要将 makeDiv 移到 IIFE 之外的原因；

标签： javascript jquery object this setinterval

【解决方案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);

};

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;

用动画更新演示

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

};

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

你能补充一点解释吗。当谈到制作这样的功能时，我也很困惑。我可以确定功能的范围。如果您可以添加有帮助的解释
你能补充一下为什么它不起作用以及你做了什么让它起作用吗？很抱歉要求更多解释
@guradio 我更新了我的答案并解释了一切:)
这将帮助包括我在内的许多读者:) 快乐的编码伙伴
非常感谢您！并感谢您的清理建议。这解决了我所有的问题！

【解决方案2】：

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

这样设置间隔

setInterval(makeDiv, 2000);

查看jsFiddle

【讨论】：

【解决方案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();
});

【讨论】：