循环函数导致它在javascript中无响应

2019-05-17 12:21:24 阅读：247 来源： 互联网

这是我尝试雪花的代码.一切似乎都没问题但是一旦脚本无响应意味着一段时间(它会慢慢浏览器firefox).
我不确定为什么会这样.
如何在没有任何浏览器的情况下使其成为响应.
这是FIDDLE

我怎样才能使它成为响应式脚本而不会引起任何问题.
我想我在循环javascript函数时犯了一个错误:(
任何建议都会很棒.

谢谢

使用Javascript：

// window.setInterval(generateSnow, 0);
var windowHeight = jQuery(document).height();
var windowWidth = jQuery(window).width();
function generateSnow() {
    for (i = 0; i < 4; i++) {
        var snowTop = Math.floor(Math.random() * (windowHeight));
        snowTop = 0;

        var snowLeft = Math.floor(Math.random() * (windowWidth - 2));
        var imageSize = Math.floor(Math.random() * 20);

        jQuery('body').append(
            jQuery('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .css('position', 'absolute')
                .html('*')
        );
    }
}


function snowFalling() {
    jQuery('.snow').each(function(key, value) {
        if (parseInt(jQuery(this).css('top')) > windowHeight - 80) {
            jQuery(this).remove();
        }
        var fallingSpeed = Math.floor(Math.random() * 5 + 1);
        var movingDirection = Math.floor(Math.random() * 2);
        var currentTop = parseInt(jQuery(this).css('top'));
        var currentLeft = parseInt(jQuery(this).css('left'));
        jQuery(this).css('top', currentTop + fallingSpeed);
        if (movingDirection === 0) {
            jQuery(this).css('bottom', currentLeft + fallingSpeed);
        } else {
            jQuery(this).css('bottom', currentLeft + -(fallingSpeed));
        }
    });
}

window.setInterval(snowFalling, 15);
window.setInterval(generateSnow, 1000);

解决方法:

您正在运行时在页面上添加和删除大量元素,这使得浏览器经常刷新该页面的结构.

那种方法是：

>你可以做的最糟糕的表现
>一旦生成,删除,生成,删除,生成,删除了足够的DIV,可能会使浏览器瘫痪……

使用此配置,移动浏览器可能会在2秒后冻结.

我建议在开始时预先生成所有DIV,重新使用它们并使用CSS动画或jQuery animate()来完成你想要做的事情.

标签：jquery,javascript,html,snowflake
来源： https://codeday.me/bug/20190517/1121275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

循环函数导致它在javascript中无响应