javascript - ajax undefined after a thousand iterations -


when creating animation try use javascript additional effects, namely snow being piled , falling off edges of foreground. figured javascript "calculations" on <canvas> had image, send "snow" php script create png images. placed on local "server" because 1 can write files.

<html> <head> <title>making snow</title> </head> <body bgcolor="black"> <canvas id="canvas" width="1920px" height="1080px"></canvas> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>     var canvas;     var ctx;     var frame=-530;     var simg = new image()     var dimg = new image()     onload = function()     {         canvas = document.getelementbyid("canvas");         ctx = canvas.getcontext("2d");         simg.src = "prodb/c/dgb.0530.png"     }     simg.onload = function()     {         var ipo=3;         // initialize pixels on screen/page         ctx.clearrect(0,0,canvas.width,canvas.height);         ctx.drawimage(simg,0,0);         document.title = "making snow " + (frame+530) + " / 7000";         snowdraw();     }     dimg.onerror = function()     {         dimg.src = "../imagewriting/snow" + zerofill(frame+530,4) + ".png";     }     dimg.onload = function()     {         frame++;         if(frame<530)             simg.src = "prodb/c/dgb.0530.png"         else if(frame>4400)             simg.src = "prodb/c/dgb.4400.png"         else             simg.src = "prodb/c/dgb." + zerofill(frame,4) + ".png"     }     var snowdraw = function()     {             var temp;             var canvasdata = ""; //          console.log(screen);             // animation             // choose random pixel @ top of screen             if(frame<7000)             {                 for(ny=canvas.height-2; ny>=0; ny--)                 {   // iterate through pixels starting bottom right corner.                     for(nx=canvas.width-2; nx>=0; nx--)                     {                         canvasdata=canvasdata+"1";                     }                 }                 $.ajax({                     method: "post",                     url: "makesnow.php",                     data:{ imgdata: canvasdata, frame: (frame+530)  }                     })                     .done(function( msg ) {                         dimg.src = "../imagewriting/snow" + zerofill(frame+530,4) + ".png";                     });             }             else             {                 document.title = "complete";             }     }  // http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript // peter bailey http://stackoverflow.com/users/8815 function zerofill( number, width ) {   width -= number.tostring().length;   if ( width > 0 )   {     return new array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;   }   return number + ""; // return string } </script>  </html>

however, on 1640th frame (or more precisely frame=1110) ajax undefined. image snow1640.png created, browser tells me ajax not defined , won't advance passed making snow 1640 / 7000. because of small random nature each "snow flake" can't pick left off, snow jump 1 frame next. though did try @ 1 point , ajax still stopped after frame.

i first ran on local machine running firefox (http://127.0.0.1/...) moved onto machine on network more powerful running chrome , both died on same frame. thought might memory or file limit moved complete frames out of there. still nothing.

edit: code snippit of problem.

also, console.log data , ajax.responsetext seem empty, both during successful "renders" , when starts iterating ajax not defined (every other line empty, every other error).

edit: new development! turns out error referenceerror: ajax not defined anyways gets called between frames (and 404 when asking dimg if image created).

edit: typing in console.log($.ajax) after onload , commenting out simg.src got function ajax().

error persists, time expanded reveal following:

success    http://127.0.0.1/ag/makesnowbc.html 197:7 j          http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 2:27131 firewith   http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 2:27949 x          http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4:22242 b          http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 4:26298

edit: changed code use synchronous ajax. time there no error messages ever, still stops @ 1640.


Comments

Post a Comment

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start. when slide right can simple listen reachedend , push slide array i'm looping. but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide. the code below work animates slide change index 1. slide = [0,1,2] //example loop slidechanged(event) { if(this.slides.isbeginning()){ this.slide = [this.slide[0]-1, ...this.slide]; this.slides.update(); this.slides.slideto(1) } } <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)"> <ion-slide *ngfor="let item of slide"> <h1>slide {{item}}</h1> </ion-slide> </ion-slides> any appreciated! you can using ionslidenextend , ionslideprevend events slides . please
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more

Add a dynamic header in angular 2 http provider -

i have http interceptor built via tutorial https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2 the problem need have dynamic header changes automatically once changes 'mode' in app. service able tell interceptor change header, or have interceptor pull header (which string)from service each request. able throwing away patch method, call http.patch('new header string') set header string. call in service controls 'mode' setting. wondering if there way interceptor pull recent value service each request or if can add method http provider via interceptor? i've tried call service in interceptor each request returns undefined. because creating new instance of service or copying value before service fired , loaded/changed data. i don't want pass header string every http provider call because defeats purpose of having interceptor, id able set once changes or have provider fetch service before makes request. tl;dr : need add autom
Read more