{"version":3,"sources":["index-wave.js"],"names":["window","document","t","delta","now","last","TIME","bodys","stop","addBody","timeBody","this","push","removeBody","index","indexOf","splice","tick","Date","getTime","handleFrame","requestAnimationFrame","start","cancelAnimationFrame","forEach","body","isStop","ticks","fn","TWEEN","update","Time","_classCallCheck","tweens","_createClass","key","value","bind","tween","pointCvs","createElement","pointCtx","getContext","width","height","grd","createRadialGradient","addColorStop","fillStyle","fillRect","Wave","_Time","_inherits","_super","_createSuper","options","_this","call","defaults","color","opacity","position","THREE","Vector3","xCount","zCount","xDis","zDis","size","frequency1","frequency2","maxWaveHeight1","minWaveHeight1","maxWaveHeight2","minWaveHeight2","initOffset1","initOffset2","offsetSpeed1","offsetSpeed2","offsetSign","xStep","zStep","offset1","offset2","particlePositions","obj","create","particlesGeom","BufferGeometry","Float32Array","uniforms","texture","CanvasTexture","Color","type","waveHeight1","waveHeight2","shaderMaterial","ShaderMaterial","vertexShader","fragmentShader","blending","AdditiveBlending","depthTest","transparent","count","x","z","setDrawRange","addAttribute","BufferAttribute","setDynamic","computeBoundingBox","center","points","Points","copy","rotation","y","Math","random","addTick","that","changeWHP","waveHeight","material","tween1","Tween","to","easing","Easing","Cubic","InOut","onUpdate","tween2","addTween","chain","removeTick","second","Ani","_Time2","_super2","_this2","targetStr","target","querySelector","innerWidth","clientWidth","clientHeight","waves","scene","Scene","camera","PerspectiveCamera","innerHeight","set","add","renderer","WebGLRenderer","antialias","alpha","setClearColor","setSize","appendChild","domElement","aspect","wave","w","render","addEventListener","aniPlaying","wave1","waveEl","getElementById","ani","addWave","resize","func","wait","mustRun","timeout","startTime","scrollHandlerThrottle","scrollHandler","args","arguments","curTime","clearTimeout","apply","setTimeout","isInViewport","breakpoint","matchMedia","breakpointChecker","removeEventListener","addListener"],"mappings":"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","file":"../index-wave.min.js","sourcesContent":["/*global THREE, TWEEN */\r\n// REF: https://codepen.io/gnauhca/pen/VzJXGG?editors=0010\r\n(function(window, document) {\r\n\t// import TWEEN from 'tween.js';\r\n\r\n\t/* 時間 */\r\n\tvar TIME = {\r\n\t\t// 所有時間body物件\r\n\t\tbodys: [],\r\n\t\tdelta: 16,\r\n\t};\r\n\r\n\tvar stop = false;\r\n\tvar t;\r\n\tTIME.addBody = function (timeBody) {\r\n\t\tthis.bodys.push(timeBody);\r\n\t};\r\n\r\n\tTIME.removeBody = function (timeBody) {\r\n\t\tvar index = this.bodys.indexOf(timeBody);\r\n\r\n\t\tif (index !== -1) {\r\n\t\t\tthis.bodys.splice(index, 1);\r\n\t\t}\r\n\t};\r\n\tTIME.tick = (function () {\r\n\t\tvar now = new Date().getTime();\r\n\t\tvar last = now;\r\n\t\tvar delta;\r\n\t\treturn function () {\r\n\t\t\tdelta = now - last;\r\n\t\t\tdelta = delta > 500 ? 30 : delta < 16 ? 16 : delta;\r\n\t\t\tTIME.delta = delta;\r\n\t\t\tlast = now;\r\n\r\n\t\t\tTIME.handleFrame(delta);\r\n\t\t\tif (!stop) {\r\n\t\t\t\tt = requestAnimationFrame(TIME.tick);\r\n\t\t\t\t// setTimeout(TIME.tick, 1000);\r\n\t\t\t}\r\n\t\t};\r\n\t})();\r\n\r\n\tTIME.start = function () {\r\n\t\tstop = false;\r\n\t\tcancelAnimationFrame(t);\r\n\t\tthis.tick();\r\n\t};\r\n\r\n\tTIME.stop = function () {\r\n\t\tcancelAnimationFrame(t);\r\n\t\tstop = true;\r\n\t};\r\n\r\n\tTIME.handleFrame = function (delta) {\r\n\t\tTIME.bodys.forEach(function (body) {\r\n\t\t\tif (!body.isStop) {\r\n\t\t\t\tbody.ticks.forEach(function (tick) {\r\n\t\t\t\t\ttick.fn && tick.fn(delta);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tTWEEN.update();\r\n\t};\r\n\r\n\t// window.TIME = TIME;\r\n\r\n\t/* 時間物體類，提供兩個時機，幀更新，固定間隔更新，每一個有時間概念的物體，就繼承 */\r\n\tclass Time {\r\n\t\tconstructor() {\r\n\t\t\tthis.ticks = [];\r\n\t\t\tthis.tweens = [];\r\n\t\t\tthis.isStop = false;\r\n\t\t\tTIME.addBody(this);\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * 該物體滅亡\r\n\t\t */\r\n\t\tdestroy() {\r\n\t\t\tTIME.removeBody(this);\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * 幀更新\r\n\t\t * @param timegap 與上一幀的時間間隔\r\n\t\t */\r\n\t\taddTick(fn) {\r\n\t\t\tvar tick = { fn: fn.bind(this) };\r\n\r\n\t\t\ttick.isStop = false;\r\n\t\t\tthis.ticks.push(tick);\r\n\t\t\treturn tick;\r\n\t\t}\r\n\r\n\t\tremoveTick(tick) {\r\n\t\t\tif (!tick) {\r\n\t\t\t\t// remove all\r\n\t\t\t\tthis.ticks = [];\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tvar index = this.ticks.indexOf(tick);\r\n\r\n\t\t\tif (index !== -1) {\r\n\t\t\t\tthis.ticks.splice(index, 1);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * tween\r\n\t\t */\r\n\t\taddTween(tween) {\r\n\t\t\tthis.tweens.push(tween);\r\n\t\t}\r\n\r\n\t\tremoveTween(tween) {\r\n\t\t\tif (!tween) {\r\n\t\t\t\t// remove all\r\n\t\t\t\tthis.tween = [];\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tvar index = this.tweens.indexOf(tween);\r\n\r\n\t\t\tif (index !== -1) {\r\n\t\t\t\t//tween.stop();\r\n\t\t\t\tthis.tweens.splice(index, 1);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// stop 暫停時間\r\n\t\tstop() {\r\n\t\t\tthis.isStop = true;\r\n\t\t\tthis.tweens.forEach(function (tween) {\r\n\t\t\t\ttween.stop();\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tstart() {\r\n\t\t\tthis.isStop = false;\r\n\t\t\tthis.tweens.forEach(function (tween) {\r\n\t\t\t\ttween.start();\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\t// window.Time = Time;\r\n\r\n\t// for (let i = 0; i < 10000; i += 100) {\r\n\t// \twindow['TIME_' + i] = window.env === 'develop' ? 0 : i;\r\n\t// }\r\n\r\n\t// import THREE from 'three';\r\n\r\n\tconst waveVertexShader = `\r\n\t\tuniform float size;\r\n\t\tuniform float frequency1;\r\n\t\tuniform float frequency2;\r\n\t\tuniform float offset1;\r\n\t\tuniform float offset2;\r\n\t\tuniform float waveHeight1;\r\n\t\tuniform float waveHeight2;\r\n\r\n\t\tvoid main() { \r\n\t\t\tvec3 curPos;\r\n\t\t\tcurPos = vec3(position.x, 1, position.z);\r\n\t\t\tcurPos[1] = cos(position.x * frequency1 + offset1) * sin(position.z * frequency1 + offset1) * waveHeight1 + cos(position.x * frequency2 + offset2) * sin(position.z * frequency2 + offset2) * waveHeight2;\r\n\r\n\r\n\t\t\tgl_PointSize = size;//min(size * curPos[1] * 0.2, 4.0);\r\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( curPos, 1.0 ); \r\n\t\t}\r\n\t`;\r\n\r\n\tconst waveFragmentShader = `\r\n\t\tuniform sampler2D texture; \r\n\t\tuniform vec3 color; \r\n\t\tuniform float opacity; \r\n\t\tvoid main() { \r\n\t\t\t\r\n\t\t\tgl_FragColor = vec4(color, opacity) * texture2D( texture, gl_PointCoord ); \r\n\t\t\t//  gl_FragColor = vec4(1,1,1,1); \r\n\t\t}\r\n\t`;\r\n\r\n\t// let pointImg = './point.png';\r\n\tconst pointCvs = document.createElement('canvas');\r\n\tconst pointCtx = pointCvs.getContext('2d');\r\n\r\n\tpointCvs.width = 32;\r\n\tpointCvs.height = 32;\r\n\r\n\tvar grd = pointCtx.createRadialGradient(16, 16, 5, 16, 16, 16);\r\n\tgrd.addColorStop(0, 'rgba(0, 0, 0, 0.3)');\r\n\tgrd.addColorStop(1, 'rgba(0, 0, 0, 0)');\r\n\r\n\tpointCtx.fillStyle = grd;\r\n\tpointCtx.fillRect(0, 0, 32, 32);\r\n\r\n\tclass Wave extends Time {\r\n\t\tconstructor(options) {\r\n\t\t\tsuper();\r\n\r\n\t\t\tconst defaults = {\r\n\t\t\t\tcolor: '#000',\r\n\t\t\t\topacity: 1,\r\n\t\t\t\tposition: new THREE.Vector3(),\r\n\t\t\t\txCount: 100,\r\n\t\t\t\tzCount: 100,\r\n\r\n\t\t\t\txDis: 200,\r\n\t\t\t\tzDis: 200,\r\n\r\n\t\t\t\tsize: 1, // 點大小\r\n\t\t\t\tfrequency1: 0.2,\r\n\t\t\t\tfrequency2: 0.1,\r\n\r\n\t\t\t\tmaxWaveHeight1: 10,\r\n\t\t\t\tminWaveHeight1: 3,\r\n\t\t\t\tmaxWaveHeight2: 8,\r\n\t\t\t\tminWaveHeight2: 5,\r\n\r\n\t\t\t\tinitOffset1: 0,\r\n\t\t\t\tinitOffset2: 0,\r\n\t\t\t\toffsetSpeed1: 2,\r\n\t\t\t\toffsetSpeed2: 4,\r\n\t\t\t\toffsetSign: 1, // -1 or 1\r\n\t\t\t};\r\n\r\n\t\t\tfor (const key in defaults) {\r\n\t\t\t\toptions[key] = options[key] || defaults[key];\r\n\t\t\t}\r\n\t\t\toptions.xStep = options.xDis / options.xCount;\r\n\t\t\toptions.zStep = options.zDis / options.zCount;\r\n\r\n\t\t\tthis.options = options;\r\n\r\n\t\t\tthis.tick = null;\r\n\r\n\t\t\tthis.offset1 = options.initOffset1;\r\n\t\t\tthis.offset2 = options.initOffset2;\r\n\r\n\t\t\tthis.particlePositions = null;\r\n\t\t\tthis.obj = this.create();\r\n\t\t}\r\n\r\n\t\tcreate() {\r\n\t\t\tconst options = this.options;\r\n\r\n\t\t\tconst particlesGeom = new THREE.BufferGeometry();\r\n\t\t\tconst particlePositions = new Float32Array(options.xCount * options.zCount * 3);\r\n\r\n\t\t\tconst uniforms = {\r\n\t\t\t\ttexture: {\r\n\t\t\t\t\tvalue: new THREE.CanvasTexture(pointCvs),\r\n\t\t\t\t},\r\n\t\t\t\tcolor: {\r\n\t\t\t\t\tvalue: new THREE.Color(options.color),\r\n\t\t\t\t},\r\n\t\t\t\topacity: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: options.opacity,\r\n\t\t\t\t},\r\n\t\t\t\tsize: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: options.size * 10,\r\n\t\t\t\t},\r\n\t\t\t\tfrequency1: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: options.frequency1,\r\n\t\t\t\t},\r\n\t\t\t\tfrequency2: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: options.frequency2,\r\n\t\t\t\t},\r\n\t\t\t\toffset1: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: 0,\r\n\t\t\t\t},\r\n\t\t\t\toffset2: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: 0,\r\n\t\t\t\t},\r\n\t\t\t\twaveHeight1: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: 0,\r\n\t\t\t\t},\r\n\t\t\t\twaveHeight2: {\r\n\t\t\t\t\ttype: 'float',\r\n\t\t\t\t\tvalue: 0,\r\n\t\t\t\t},\r\n\t\t\t};\r\n\r\n\t\t\tvar shaderMaterial = new THREE.ShaderMaterial({\r\n\t\t\t\tuniforms: uniforms,\r\n\t\t\t\tvertexShader: waveVertexShader,\r\n\t\t\t\tfragmentShader: waveFragmentShader,\r\n\r\n\t\t\t\tblending: THREE.AdditiveBlending,\r\n\t\t\t\tdepthTest: false,\r\n\t\t\t\ttransparent: true,\r\n\t\t\t});\r\n\r\n\t\t\tlet count = 0;\r\n\t\t\tfor (let x = 0; x < options.xCount; x++) {\r\n\t\t\t\tfor (let z = 0; z < options.zCount; z++) {\r\n\t\t\t\t\tparticlePositions[count++] = x * options.xStep;\r\n\t\t\t\t\tparticlePositions[count++] = 0; //  y\r\n\t\t\t\t\tparticlePositions[count++] = z * options.zStep;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tthis.particlePositions = particlePositions;\r\n\r\n\t\t\tparticlesGeom.setDrawRange(0, options.xCount * options.zCount);\r\n\t\t\tparticlesGeom.addAttribute(\r\n\t\t\t\t'position',\r\n\t\t\t\tnew THREE.BufferAttribute(particlePositions, 3).setDynamic(true)\r\n\t\t\t);\r\n\t\t\tparticlesGeom.computeBoundingBox();\r\n\t\t\tparticlesGeom.center();\r\n\r\n\t\t\tconst points = new THREE.Points(particlesGeom, shaderMaterial);\r\n\t\t\tpoints.position.copy(options.position);\r\n\t\t\tpoints.rotation.y = Math.random() * 0.2;\r\n\r\n\t\t\treturn points;\r\n\t\t}\r\n\r\n\t\tstart() {\r\n\t\t\tthis.tick = this.addTick(this.update);\r\n\r\n\t\t\tconst that = this;\r\n\t\t\tfunction changeWHP(waveHeight) {\r\n\t\t\t\tthat.obj.material.uniforms.waveHeight1.value = waveHeight.waveHeight1;\r\n\t\t\t\tthat.obj.material.uniforms.waveHeight2.value = waveHeight.waveHeight2;\r\n\t\t\t}\r\n\r\n\t\t\tconst waveHeight = {\r\n\t\t\t\twaveHeight1: this.options.minWaveHeight1,\r\n\t\t\t\twaveHeight2: this.options.minWaveHeight2,\r\n\t\t\t};\r\n\t\t\tconst tween1 = new TWEEN.Tween(waveHeight)\r\n\t\t\t\t.to(\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\twaveHeight1: this.options.maxWaveHeight1,\r\n\t\t\t\t\t\twaveHeight2: this.options.maxWaveHeight2,\r\n\t\t\t\t\t},\r\n\t\t\t\t\t3000\r\n\t\t\t\t)\r\n\t\t\t\t.easing(TWEEN.Easing.Cubic.InOut)\r\n\t\t\t\t.onUpdate(changeWHP);\r\n\r\n\t\t\tconst tween2 = new TWEEN.Tween(waveHeight)\r\n\t\t\t\t.to(\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\twaveHeight1: this.options.minWaveHeight1,\r\n\t\t\t\t\t\twaveHeight2: this.options.minWaveHeight2,\r\n\t\t\t\t\t},\r\n\t\t\t\t\t3000\r\n\t\t\t\t)\r\n\t\t\t\t.easing(TWEEN.Easing.Cubic.InOut)\r\n\t\t\t\t.onUpdate(changeWHP);\r\n\r\n\t\t\tthis.addTween(tween1);\r\n\t\t\ttween1.chain(tween2);\r\n\t\t\ttween2.chain(tween1);\r\n\t\t\ttween1.start();\r\n\t\t}\r\n\r\n\t\tstop() {\r\n\t\t\tthis.removeTick(this.tick);\r\n\t\t}\r\n\r\n\t\tupdate(delta) {\r\n\t\t\tconst options = this.options;\r\n\t\t\tconst second = delta / 1000;\r\n\r\n\t\t\tthis.obj.material.uniforms.offset1.value += second * options.offsetSpeed1 * options.offsetSign;\r\n\t\t\tthis.obj.material.uniforms.offset2.value += second * options.offsetSpeed2 * options.offsetSign;\r\n\t\t}\r\n\t}\r\n\r\n\tclass Ani extends Time {\r\n\t\tconstructor(options) {\r\n\t\t\tsuper();\r\n\r\n\t\t\tconst targetStr = options.target || 'body';\r\n\t\t\tthis.target = document.querySelector(targetStr);\r\n\r\n\t\t\tthis.size = {};\r\n\t\t\tthis.size.width = this.target === 'body' ? window.innerWidth : this.target.clientWidth;\r\n\t\t\tthis.size.height = this.target === 'body' ? (window.innerWidth * 9) / 16 : this.target.clientHeight;\r\n\r\n\t\t\tthis.waves = [];\r\n\t\t\tthis.tick = null;\r\n\r\n\t\t\tthis.scene = new THREE.Scene(); // 場景\r\n\r\n\t\t\tthis.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); // 透視相機\r\n\t\t\tthis.camera.position.set(0, 6, 150); // 相機位置\r\n\t\t\tthis.scene.add(this.camera); // add到場景中\r\n\t\t\t// this.scene.fog = new THREE.Fog(0x000000, 100, 500);\r\n\r\n\t\t\tthis.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 渲染\r\n\t\t\tthis.renderer.setClearColor(0x000000, 0);\r\n\t\t\tthis.renderer.setSize(this.size.width, this.size.height);\r\n\r\n\t\t\tthis.target.appendChild(this.renderer.domElement); // 將渲染Element新增到Dom中\r\n\t\t}\r\n\r\n\t\tresize() {\r\n\t\t\tthis.camera.aspect = 16 / 9;\r\n\t\t\tthis.renderer.setSize(this.size.width, this.size.height);\r\n\t\t}\r\n\r\n\t\taddWave(wave) {\r\n\t\t\tthis.waves.push(wave);\r\n\t\t\tthis.scene.add(wave.obj);\r\n\t\t}\r\n\r\n\t\tstart() {\r\n\t\t\tthis.waves.forEach((w) => w.start());\r\n\t\t\tthis.tick = this.addTick(this.update);\r\n\t\t}\r\n\r\n\t\tstop() {\r\n\t\t\tthis.removeTick(this.tick);\r\n\t\t}\r\n\r\n\t\tupdate() {\r\n\t\t\tthis.renderer.render(this.scene, this.camera);\r\n\t\t}\r\n\t}\r\n\r\n\tfunction buildWave() {\r\n\t\tlet aniPlaying = false;\r\n\t\tconst wave1 = new Wave({\r\n\t\t\tcolor: 0x3062ff,\r\n\t\t\topacity: 0.7,\r\n\t\t\tposition: new THREE.Vector3(),\r\n\t\t\txCount: 300,\r\n\t\t\tzCount: 300,\r\n\t\t\txDis: 200, //  x 寬\r\n\t\t\tzDis: 200, //  z 寬\r\n\t\t\tsize: 0.6, //  點大小\r\n\t\t\tfrequency1: 0.03,\r\n\t\t\tfrequency2: 0.06,\r\n\r\n\t\t\tmaxWaveHeight1: 15,\r\n\t\t\tminWaveHeight1: 10,\r\n\t\t\tmaxWaveHeight2: 12,\r\n\t\t\tminWaveHeight2: 10,\r\n\r\n\t\t\tinitOffset1: 0,\r\n\t\t\tinitOffset2: 0,\r\n\t\t\toffsetSpeed1: 0.6,\r\n\t\t\toffsetSpeed2: 0.4,\r\n\t\t\toffsetSign: 1, //  -1 or 1\r\n\t\t});\r\n\r\n\t\tconst waveEl = document.getElementById('wave');\r\n\r\n\t\tconst ani = new Ani({\r\n\t\t\ttarget: '#wave', // 生成的目標\r\n\t\t});\r\n\t\tani.addWave(wave1);\r\n\r\n\t\t// ani.start();\r\n\t\t// aniPlaying = true\r\n\r\n\t\twindow.addEventListener('resize', () => {\r\n\t\t\tani.resize();\r\n\t\t});\r\n\r\n\t\tTIME.start();\r\n\r\n\t\tconst scrollHandlerThrottle = throttle(scrollHandler, 20, 50); // 節流作用\r\n\t\tfunction scrollHandler() {\r\n\t\t\tif (isInViewport(waveEl) && !aniPlaying) {\r\n\t\t\t\taniPlaying = true;\r\n\t\t\t\tani.start();\r\n\t\t\t} else if (!isInViewport(waveEl)) {\r\n\t\t\t\taniPlaying = false;\r\n\t\t\t\tani.stop();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst breakpoint = window.matchMedia('(min-width: 1024px)');\r\n\t\tconst breakpointChecker = function() {\r\n\t\t\tif (breakpoint) {\r\n\t\t\t\t// Large\r\n\t\t\t\twindow.addEventListener('scroll', scrollHandlerThrottle);\r\n\t\t\t\tscrollHandler();\r\n\t\t\t} else {\r\n\t\t\t\t// Small + Medium\r\n\t\t\t\twindow.removeEventListener('scroll', scrollHandlerThrottle);\r\n\t\t\t\taniPlaying = false;\r\n\t\t\t\tani.stop();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tbreakpointChecker();\r\n\t\tbreakpoint.addListener(breakpointChecker);\r\n\t}\r\n\r\n\twindow.addEventListener('load', buildWave);\r\n\r\n\t// ===============================\r\n\r\n\t// 簡單的節流函數\r\n\tfunction throttle(func, wait, mustRun) {\r\n\t\tvar timeout,\r\n\t\t\tstartTime = new Date();\r\n\t\r\n\t\treturn function() {\r\n\t\t\tvar context = this,\r\n\t\t\t\targs = arguments,\r\n\t\t\t\tcurTime = new Date();\r\n\t\r\n\t\t\tclearTimeout(timeout);\r\n\t\t\t// 如果達到了規定的觸發時間間隔，觸發 handler\r\n\t\t\tif(curTime - startTime >= mustRun){\r\n\t\t\t\tfunc.apply(context,args);\r\n\t\t\t\tstartTime = curTime;\r\n\t\t\t// 沒達到觸發間隔，重新設定定時器\r\n\t\t\t}else{\r\n\t\t\t\ttimeout = setTimeout(func, wait);\r\n\t\t\t}\r\n\t\t};\r\n\t};\r\n\t\r\n})(window, document);\r\n"],"sourceRoot":"../../src/"}