遇到程序流问题

遇到程序流问题 - 在AJAX回调和渲染PIXI JS之间徘徊(Having trouble with program flow - juggling between AJAX callbacks and rendering PIXI JS)

我无法顺利地使用js脚本。 这是一个接收和发送鼠标坐标并绘制它们的脚本。

这里是：

//Initialize PIXI var stage = new PIXI.Stage(0x000000); var renderer = new PIXI.WebGLRenderer(1600, 900); document.body.appendChild(renderer.view); //requestAnimFrame(animate); function animate() { console.log("Draw."); requestAnimFrame(animate); renderer.render(stage); } //Function for receiving data. indx = 0; var makeRequest = function(){ var ajaxFunction = function(){ if(ajaxRequest.readyState == 4){ var pointsStr = ajaxRequest.responseText.split("C"); //The co-ordinates are received in this form: "pointCpointCpointCpoint...pointCindex" indx = parseInt(pointsStr[pointsStr.length - 1]); for (i = 0; i < pointsStr.length - 1; i++) { if(pointsStr[i] != ""){ var points = pointsStr[i].split(","); mouseX = parseInt(points[0]); mouseY = parseInt(points[1]); var graphics = new PIXI.Graphics(); //Why create new graphics every time? PixiJS bugs out if I don't. Probably also something to do with the flow. graphics.lineStyle(1, 0xFFFFFF); stage.addChild(graphics); graphics.drawRect(mouseX,mouseY,1,1); renderer.render(stage); console.log("Received.") } } } } var ajaxRequest = new XMLHttpRequest(); ajaxRequest.onreadystatechange = ajaxFunction; ajaxRequest.open("GET", "http://127.0.0.1/receiveData/0=" + indx, true); ajaxRequest.send(); } //Function for sending data. var sendRequest = function(arr){ var t = "" for (var i = 0; i < arr.length; i++) { t += arr[i].x.toString() + "," + arr[i].y.toString() + "C"; } t = t.slice(0,-1); var ajaxRequest = new XMLHttpRequest(); ajaxRequest.open("POST", "http://127.0.0.1/sendData/" + t, true); ajaxRequest.send(); console.log("Send.") } pos = { x: 0, y: 0 } var mouseRecording = new Array(); document.addEventListener('mousemove', function(e){ var p = pos; p.x = e.clientX || e.pageX; p.y = e.clientY || e.pageY; mouseRecording.push(pos); console.log("" + p.x + "," + p.y) }, false); var interval = setInterval(function(){ console.log("Make Request."); sendRequest(mouseRecording); makeRequest(); }, 100);

基本上，问题是流程确实不一致。

例如，它只是POST和GET 10秒没有回调运行，但随后突然有200个请求随后运行，然后可能一次在蓝色的月亮中屏幕将呈现等。

这里使程序充分流动的正确方法是什么？

I'm having trouble making my js script flow smoothly. It's a script that receives and sends mouse co-ordinates and draws them.

Here it is:

//Initialize PIXI var stage = new PIXI.Stage(0x000000); var renderer = new PIXI.WebGLRenderer(1600, 900); document.body.appendChild(renderer.view); //requestAnimFrame(animate); function animate() { console.log("Draw."); requestAnimFrame(animate); renderer.render(stage); } //Function for receiving data. indx = 0; var makeRequest = function(){ var ajaxFunction = function(){ if(ajaxRequest.readyState == 4){ var pointsStr = ajaxRequest.responseText.split("C"); //The co-ordinates are received in this form: "pointCpointCpointCpoint...pointCindex" indx = parseInt(pointsStr[pointsStr.length - 1]); for (i = 0; i < pointsStr.length - 1; i++) { if(pointsStr[i] != ""){ var points = pointsStr[i].split(","); mouseX = parseInt(points[0]); mouseY = parseInt(points[1]); var graphics = new PIXI.Graphics(); //Why create new graphics every time? PixiJS bugs out if I don't. Probably also something to do with the flow. graphics.lineStyle(1, 0xFFFFFF); stage.addChild(graphics); graphics.drawRect(mouseX,mouseY,1,1); renderer.render(stage); console.log("Received.") } } } } var ajaxRequest = new XMLHttpRequest(); ajaxRequest.onreadystatechange = ajaxFunction; ajaxRequest.open("GET", "http://127.0.0.1/receiveData/0=" + indx, true); ajaxRequest.send(); } //Function for sending data. var sendRequest = function(arr){ var t = "" for (var i = 0; i < arr.length; i++) { t += arr[i].x.toString() + "," + arr[i].y.toString() + "C"; } t = t.slice(0,-1); var ajaxRequest = new XMLHttpRequest(); ajaxRequest.open("POST", "http://127.0.0.1/sendData/" + t, true); ajaxRequest.send(); console.log("Send.") } pos = { x: 0, y: 0 } var mouseRecording = new Array(); document.addEventListener('mousemove', function(e){ var p = pos; p.x = e.clientX || e.pageX; p.y = e.clientY || e.pageY; mouseRecording.push(pos); console.log("" + p.x + "," + p.y) }, false); var interval = setInterval(function(){ console.log("Make Request."); sendRequest(mouseRecording); makeRequest(); }, 100);

Basically, the problem is that the flow is really inconsistent.

For example it'd just POST and GET for 10 seconds with no callback being run, but then suddenly 200 requests would run subsequently, and then maybe once in a blue moon the screen would render etc.

What is the correct way here to make the program flow adequately?

最满意答案

关于函数命名和职责的一些注意事项：1。如果你的函数有一个非常通用的短名称，并且在它上面有一个注释不同的注释，那么就去掉注释并重命名你的函数。 你的功能应该只做它所说的功能，仅此而已。 3.您的函数不应修改其父作用域。 副作用使调试变得困难。

也就是说，让我们首先将其分解为一大堆微小的功能，这些功能做得很少，他们不可能做错任何事情。 并命名，以便他们不做任何其他事情。

//Initialize PIXI var stage = new PIXI.Stage(0x000000); var renderer = new PIXI.WebGLRenderer(1600, 900); document.body.appendChild(renderer.view); function httpRequest(method, url, success, fail) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 ) { if(xmlhttp.status == 200){ success(xmlhttp.responseText); } else { fail(); } } } xmlhttp.open(method, url, true); xmlhttp.send(); } function getRequest(url, success, fail) { httpRequest('GET', url, success, fail); } function postRequest(url, success, fail) { httpRequest('POST', url, success, fail); } function buildDataStringFromCoords(coords) { return coords.map(function(coord) { return coord.x.toString() + ',' + coord.y.toString(); }).join('C'); } function buildCoordsFromDataString(dataString) { return dataString.split('C').map(function(coordString) { var points = coordString.split(','); return {x:+points[0], y:+points[1]}; }); } function renderCoords(coords) { var graphics = new PIXI.Graphics(); //Why create new graphics every time? PixiJS bugs out if I don't. Probably also something to do with the flow. graphics.lineStyle(1, 0xFFFFFF); stage.addChild(graphics); graphics.drawRect(coords.x, coords.y, 1, 1); renderer.render(stage); } function requestCoords(indx, success, fail) { var url = 'http://127.0.0.1/receiveData/0=' + indx; getRequest( url, function(response) { var coords = buildCoordsFromDataString(response); success(coords); }, function() { fail(); } ); } var sendCoords = function(coords, success, fail) { var url = 'http://127.0.0.1/sendData/' + buildDataStringFromCoords(coords); postRequest( url, function() { success(); }, function() { fail(); } ); } pos = { x: 0, y: 0 }; var mouseRecording = new Array(); document.addEventListener('mousemove', function(e){ var p = pos; p.x = e.clientX || e.pageX; p.y = e.clientY || e.pageY; mouseRecording.push(pos); console.log('Mouse moved', p.x, p.y); }, false); var interval = setInterval(function(){ console.log("Make Request."); sendCoords( mouseRecording, function() { console.log('Successfully sent coords', mouseRecording); }, function() { console.log('Failed to send coords', mouseRecording); } ); requestCoords( indx, function(coords) { console.log('Successfully fetched coords', coords); coords.forEach(function(coord) { renderCoords(coord); }); console.log('Rendered coords', indx); }, function() { console.log('Failed to get coords', indx); } ); }, 100);

现在让我们编写一些测试来证明每个部分都是“正确的”，因此每次出现问题时你都不必逐步完成整个大事。 例如：

function testBuildDataStringFromCoords() { return buildDataStringFromCoords([{x:123,y:456},{x:987,y:654}]) === '123,456C987,654'; }

这可能无法完全解决您遇到的问题，但我希望它能让您的生活更轻松，并使问题更加透明。

A few notes on function naming and responsibilities: 1. If your function has a really generic short name and a comment right above it that says something different, then get rid of the comment and rename your function. 2. Your function should only do what it says it does it does, and nothing more. 3. Your function should not modify its parent scope. Side effects make debugging difficult.

That said, let's start by breaking this out into a whole bunch of tiny functions that do so little, they can't possibly do anything wrong. And named so that they don't do anything else.

//Initialize PIXI var stage = new PIXI.Stage(0x000000); var renderer = new PIXI.WebGLRenderer(1600, 900); document.body.appendChild(renderer.view); function httpRequest(method, url, success, fail) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 ) { if(xmlhttp.status == 200){ success(xmlhttp.responseText); } else { fail(); } } } xmlhttp.open(method, url, true); xmlhttp.send(); } function getRequest(url, success, fail) { httpRequest('GET', url, success, fail); } function postRequest(url, success, fail) { httpRequest('POST', url, success, fail); } function buildDataStringFromCoords(coords) { return coords.map(function(coord) { return coord.x.toString() + ',' + coord.y.toString(); }).join('C'); } function buildCoordsFromDataString(dataString) { return dataString.split('C').map(function(coordString) { var points = coordString.split(','); return {x:+points[0], y:+points[1]}; }); } function renderCoords(coords) { var graphics = new PIXI.Graphics(); //Why create new graphics every time? PixiJS bugs out if I don't. Probably also something to do with the flow. graphics.lineStyle(1, 0xFFFFFF); stage.addChild(graphics); graphics.drawRect(coords.x, coords.y, 1, 1); renderer.render(stage); } function requestCoords(indx, success, fail) { var url = 'http://127.0.0.1/receiveData/0=' + indx; getRequest( url, function(response) { var coords = buildCoordsFromDataString(response); success(coords); }, function() { fail(); } ); } var sendCoords = function(coords, success, fail) { var url = 'http://127.0.0.1/sendData/' + buildDataStringFromCoords(coords); postRequest( url, function() { success(); }, function() { fail(); } ); } pos = { x: 0, y: 0 }; var mouseRecording = new Array(); document.addEventListener('mousemove', function(e){ var p = pos; p.x = e.clientX || e.pageX; p.y = e.clientY || e.pageY; mouseRecording.push(pos); console.log('Mouse moved', p.x, p.y); }, false); var interval = setInterval(function(){ console.log("Make Request."); sendCoords( mouseRecording, function() { console.log('Successfully sent coords', mouseRecording); }, function() { console.log('Failed to send coords', mouseRecording); } ); requestCoords( indx, function(coords) { console.log('Successfully fetched coords', coords); coords.forEach(function(coord) { renderCoords(coord); }); console.log('Rendered coords', indx); }, function() { console.log('Failed to get coords', indx); } ); }, 100);

This now lets us write some tests to prove that each part is "correct", so you don't have to step through the entire big thing every time something goes wrong. For example:

function testBuildDataStringFromCoords() { return buildDataStringFromCoords([{x:123,y:456},{x:987,y:654}]) === '123,456C987,654'; }

This might not completely fix the issues you have, but I hope it makes your life easier and will make the issue more transparent.