Tengo un objeto GIF.js en mi objeto this que me gustaría this.gif.addframe(mapcanvas) en un bucle que pasa por una matriz de fechas al final de la cual hago this.gif.render() . Debo hacer uso de this dentro de la devolución de llamada que, entiendo, sería posible si tuviera que almacenarlo en caché y usar una función de flecha, pero necesito tener algo como

 for(let i = 0 ; i < this.dateArraySurface10.length-2 ; i++) { this.setTimeSurface10(); this.map.renderSync(); var self = this; const mapCanvas = document.createElement('canvas'); this.map.once('rendercomplete', function () { const divElement = document.querySelector(".map"); mapCanvas.width = divElement.offsetWidth;//size[0]; mapCanvas.height = divElement.offsetHeight;//size[1]; const mapContext = mapCanvas.getContext('2d'); Array.prototype.forEach.call( document.querySelectorAll('.ol-layer canvas'), function (canvas) { if (canvas.width > 0) { const opacity = canvas.parentNode.style.opacity; mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); const transform = canvas.style.transform; const matrix = transform .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line .split(',') .map(Number); CanvasRenderingContext2D.prototype.setTransform.apply( mapContext, matrix ); mapContext.drawImage(canvas, 0, 0); } } ); self.gif.addFrame(mapCanvas, {copy:true, delay: 200}); console.log(i); }); } this.gif.on('finished', function(blob) { window.open(URL.createObjectURL(blob)); }); this.gif.render(); }

dónde

 setTimeSurface10: function () { if (this.currentTimeSurface10 === null) { this.currentTimeSurface10 = this.startTimeSurface10; } else if (this.currentTimeSurface10 >= this.endTimeSurface10) { this.currentTimeSurface10 = this.startTimeSurface10; } else { this.currentTimeSurface10 = new Date( this.currentTimeSurface10.setMinutes( this.currentTimeSurface10.getMinutes() + 60) ); } this.surface10.getSource().updateParams({ TIME: this.currentTimeSurface10.toISOString().split(".")[0] + "Z" }); }

Esto no es más que pseudocódigo ya que por el momento logré producir un GIF muy aburrido que agrega el mismo cuadro una y otra vez usando el patrón de función let vm = this y flecha. ¿Alguien puede explicarme cómo debo acceder y usar esto dentro de mi devolución de llamada dentro de mi bucle?