JQuery. snowflake falling plug-in

I. Recently, when Christmas is approaching, we need to apply a snowflake Falling Effect on the page. Before doing so, the product manager gave me a demo on the Internet and previewed it. The effect was good, however, the performance can be further optimized. The setInterval repetition timer is used in the source code, and the dom is constantly inserted... syntaxHighlighter. all (); I. Preface: a snowflake falling effect needs to be applied on the page when Christmas is approaching recently. The product manager gave me a demo on the network, after previewing, the effect is good, but the performance can be optimized. The setInterval repetition timer is used in the source code, and the dom is constantly inserted and removed. Here we mainly optimize the two parts and use setTimeout to replace setInterval, reduce the page dom re-arrangement. you can adjust it elsewhere. II. Application Instance demo/*** component: jQuery. snowflake 2013/12/19 Hua Zi y * invoking: jQuery. snowflake (options) * // configuration object options = {length: 26, // Number of interval: 1000, // interval duration between snowflakes: 24000 // snowflake animation time} **/demo address 1: http://miiee.taobao.com/ Activity/shengdan.htm demo address 2: http://miiee.taobao.com/ 3. Design Idea Step 1: Use HTML entities to represent the snowflake shape, where the snowflake appears, and the size is random Step 2: to keep the time interval between adjacent snowflakes (or the distance between them) Consistent forever, you must use a repetition timer and double setTimeout instead of setInterval, this step is very important setTimeout (function call () {// do something setTimeout (call, interval) ;}, 0 ); // The use of double setTimeout to simulate the repetition timer is very useful for other applications such as automatic carousel. // It is recommended to read the disadvantages and Solutions of setInterval In the javascript advanced programming book. 4. component source code $. extend ({// snowflake falling component snowflake: function (options) {var flakeHtmlStr = '', config = {length: 26, // Number of interval: 1000, // interval of Occurrence Between snowflakes duration: 24000 // animation time of snowflake}; $. extend (config, options | |{}); var len = config. length, $ win =$ (window), win_width = $ win. width (), win_height = $ win. height (), timeoutId = null, $ items, I, initStyle = {position: 'absolute ', top:'-50px ', zIndex: 9999, opacity: 1, fontSize: 0, color: '# fff'}, endStyle = {top: win_height + 50 + 'px', opacity: 0}; // insert DOM, and initialize its style for (I = 0; I <len; I ++) {flakeHtmlStr + ='❄';} $ (FlakeHtmlStr ). appendTo ('body'); $ items = Response ('.snow-flake'}.css (initStyle ). wrapAll (''); // process a single snowflake function handleItem (idx) {var $ itm = incluitems.eq(idx).css (initStyle), w, val; effecitm.css ({fontSize: 20 + Math. ceil (Math. random () * 30, 10) + 'px '}); w = $ itm. width (); val = Math. floor (Math. random () * win_width); if (val + w)> = win_width) {val = val-w;} else itm.css ({left: val + 'px '}). animate (endStyle, config. duration);} // start running function running () {var I = 0; setTimeout (function call () {handleItem (I); if (I <len-1) {I ++;} else {I = 0;} setTimeout (call, config. interval) ;}, 0) ;}running () ;}}); $. snowflake (); // call