Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 4th, 2012  |  syntax: None  |  size: 5.04 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. javascript variable scope/closure in loop after timeout
  2. function update()
  3.         {
  4.             var i;
  5.             this.context.lineWidth = BRUSH_SIZE;            
  6.             this.context.strokeStyle = "rgba(" + COLOR[0] + ", " + COLOR[1] + ", " + COLOR[2] + ", " +  BRUSH_PRESSURE + ")";
  7.             for (i = 0; i < scope.painters.length; i++)
  8.             {
  9.                 scope.context.beginPath();
  10.                 var dx = scope.painters[i].dx;
  11.                 var dy = scope.painters[i].dy;
  12.                 scope.context.moveTo(dx, dy);  
  13.                 var dx1 = scope.painters[i].ax = (scope.painters[i].ax + (scope.painters[i].dx - scope.mouseX) * scope.painters[i].div) * scope.painters[i].ease;
  14.                 scope.painters[i].dx -= dx1;
  15.                 var dx2 = scope.painters[i].dx;
  16.                 var dy1 = scope.painters[i].ay = (scope.painters[i].ay + (scope.painters[i].dy - scope.mouseY) * scope.painters[i].div) * scope.painters[i].ease;
  17.                 scope.painters[i].dy -= dy1;
  18.                 var dy2 = scope.painters[i].dy;
  19.                 scope.context.lineTo(dx2, dy2);
  20.                 scope.context.stroke();
  21.                 for(j=FADESTEPS;j>0;j--)
  22.                 {
  23.                     setTimeout(function()
  24.                         {
  25.                             var x=dx,y=dy,x2=dx2,y2=dy2;
  26.                             scope.context.beginPath();
  27.                             scope.context.lineWidth=BRUSH_SIZE+1;
  28.                             scope.context.moveTo(x, y);
  29.                             scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
  30.                             scope.context.lineTo(x2, y2);
  31.                             scope.context.stroke();
  32.                             scope.context.lineWidth=BRUSH_SIZE;
  33.                         },
  34.                     DURATION/j);
  35.                 }
  36.             }
  37.         }
  38.        
  39. for(j=FADESTEPS;j>0;j--) {
  40.    (function(x,y,x2,y2) {
  41.       setTimeout(function() {
  42.          scope.context.beginPath();
  43.          scope.context.lineWidth=BRUSH_SIZE+1;
  44.          scope.context.moveTo(x, y);
  45.          scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
  46.          scope.context.lineTo(x2, y2);
  47.          scope.context.stroke();
  48.          scope.context.lineWidth=BRUSH_SIZE;
  49.       },
  50.       DURATION/j);
  51.    })(dx, dy, dx2, dy2);
  52. }
  53.        
  54. `<script>
  55. for(j=10;j>0;j--)
  56.                 {
  57.                 var fn = function(ind){return function()
  58.                         {
  59.                             console.log(ind);
  60.                         };
  61.                         }(j);
  62.                     setTimeout(fn,
  63.                     1000);
  64.                 }
  65. </script>`
  66.        
  67. for(j=FADESTEPS;j>0;j--)
  68. {
  69.    setTimeout(function(x,y,x2,y2)
  70.      {
  71.         scope.context.beginPath();
  72.         scope.context.lineWidth=BRUSH_SIZE+1;
  73.         scope.context.moveTo(x, y);
  74.         scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
  75.         scope.context.lineTo(x2, y2);
  76.         scope.context.stroke();
  77.         scope.context.lineWidth=BRUSH_SIZE;
  78.      },
  79.      DURATION/j,dx,dy,dx2,dy2);
  80. }
  81.        
  82. for (var i = 0; i < 10; i++) setTimeout(function() { console.log(i)}, 10 )
  83. 10
  84. 10
  85. // ...
  86.        
  87. this.interval = setInterval(update, REFRESH_RATE);
  88.  
  89.     var _points = [];
  90.  
  91.     function update() {
  92.         var i;
  93.         this.context.lineWidth = BRUSH_SIZE;
  94.         this.context.strokeStyle = "rgba(" + COLOR[0] + ", " + COLOR[1] + ", " + COLOR[2] + ", " + BRUSH_PRESSURE + ")";
  95.         for (i = 0; i < scope.painters.length; i++) {
  96.             scope.context.beginPath();
  97.             var dx = scope.painters[i].dx;
  98.             var dy = scope.painters[i].dy;
  99.             scope.context.moveTo(dx, dy);
  100.             var dx1 = scope.painters[i].ax = (scope.painters[i].ax + (scope.painters[i].dx - scope.mouseX) * scope.painters[i].div) * scope.painters[i].ease;
  101.             scope.painters[i].dx -= dx1;
  102.             var dx2 = scope.painters[i].dx;
  103.             var dy1 = scope.painters[i].ay = (scope.painters[i].ay + (scope.painters[i].dy - scope.mouseY) * scope.painters[i].div) * scope.painters[i].ease;
  104.             scope.painters[i].dy -= dy1;
  105.             var dy2 = scope.painters[i].dy;
  106.             scope.context.lineTo(dx2, dy2);
  107.             scope.context.stroke();
  108.             _points.push([dx, dy, dx2, dy2]);
  109.  
  110.             clear();
  111.         }
  112.     }
  113.  
  114.     function clear(){
  115.  
  116.         if(_points.length < FADESTEPS){
  117.             return;
  118.         }
  119.  
  120.         var p = _points.shift();
  121.                     if(!p){
  122.                         return;
  123.                     }
  124.                     var x = p[0],
  125.                         y = p[1],
  126.                         x2 = p[2],
  127.                         y2 = p[3];
  128.                     scope.context.beginPath();
  129.                     scope.context.lineWidth = BRUSH_SIZE + 1;
  130.                     scope.context.moveTo(x, y);
  131.                     scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
  132.                     scope.context.lineTo(x2, y2);
  133.                     scope.context.stroke();
  134.                     scope.context.lineWidth = BRUSH_SIZE;
  135.  
  136.     }
create a new version of this paste RAW Paste Data