Question

我有一个网站，使用javascript和php逐帧生成GIF。简而言之，这个过程是：

使用javascript生成一个框架（存储为长base64编码的字符串）
发送此字符串到after_initialize，这将打开部分copmlete文件并在文件末尾添加字符串。
等待以便成功写入文件，然后转到第1步进行下一帧

因此，作为结束，我将逐个创建一个文件，其中包含gif的所有帧。大部分时间都有效。但是，有时两个帧会被切换，这会使gif断断续续（例如，当球击中this gif中的帖子时）。

我正在使用对php的调用将它拼凑在一起，等待它们成功。根据我对ajax成功事件的理解，代码应等到上一帧完成保存后再生成下一帧，所以如何才能将php写入文件中订单？

我在ajax请求中尝试将async设置为false，但是仍然会发生口吃（虽然不常见）。最重要的是，生成速度较慢，因此这不是我理想的解决方案。

的Javascript

writeToFile.php

PHP - writeToFile.php

打开文件，附加框架的内容，然后关闭

//Dostep - The first part of the frame generation. If we aren't done saving to file, wait 100 ms then check again
//This waits until the last frame is generated before generating a new one
var step=(function(){
    var doStep = function () {      
        if (frameSavingToFile){ //Check
            setTimeout(
                 function(){
                      doStep();
                  },
                   100 //if we are saving to file, wait
                 );  
                    return;
         }
        //there is code here I've omitted which moves to the next frame, and stores the string
        saveFrameToFile(frame);
    }
    return function () {
        if (!stepping) setTimeout(doStep, 0);
    };

}

function saveFrameToFile(theEncoder,isLastFrame){
    frameSavingToFile=1;
    var toAppend=window.btoa(theEncoder.stream().getData()); //add in the base 64 to the file
    //save it to a file, on success set frameSavingToFile to 0
    var toPassIn={'fileName':tmpFileName+".gif",'contents':toAppend};
    $.ajax({
      url: "php/writeToFile.php",
       type: "POST",
       data: toPassIn,
       success: function(results) {
           console.log(results);
           frameSavingToFile=0;//we are no longer saving to file
           if (isLastFrame){//this is set to 1 on the last frma
               generationComplete();//don't generate more frames, load the gif for viewing
               return;
           }
       }
    });


}

Answer 1

代码过于复杂，有超时循环等等。为什么不简单地让ajax调用的成功处理程序重新调用以启动下一次写入？

e.g。

function savedata() {
    var toAppend=window.btoa(theEncoder.stream().getData()); //add in the base 64 to the file
    if (toAppend != '') { // or whatever it takes to see if the encoder's done
      $.ajax(
        blah blah blah,
        success: savedata // keep "looping" until there's nothing left to do
      );
    } else {
       console.log('done');
    }
}

这样你就可以直接发出ajax请求，直到没有更多的数据要保存，一切都只是“结束”。您还可以保证下一个呼叫在前一个呼叫完成之前不会消失。你也可以在每次通话时节省多达99毫秒，而不是等待你的超时完成。

Answer 2

默认情况下，jQuery中的ajax调用是异步的。这意味着它们会同时发送到服务器。尝试在$.ajax({})配置对象中设置此标记：async: false

这会阻止javascript执行，直到请求从服务器返回。

Answer 3

您的代码不会等待，

等待写入文件成功，然后转到下一帧的步骤1

尝试使用同步请求：

 $.ajax({
  url: "php/writeToFile.php",
   type: "POST",
   async: false,
   data: ...

jquery ajax：

async（默认值：true）类型：Boolean默认情况下，发送所有请求异步（即默认设置为true）。如果你需要同步请求，将此选项设置为false。跨域请求和dataType：＆＃34; jsonp＆＃34;请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。

如何使用php有效地将巨大的javascript字符串存储到文件中？

的Javascript

PHP - writeToFile.php

3 个答案: