Javascript 'onbeforeunload()' 无法使用函数调用

Question

我有下面这个脚本，用于调查。我遇到的问题是，当我不在其中调用函数时，onbeforeunload() 会起作用。如果我在其中进行任何函数调用（save_survey() 或 fetch_demographics()），浏览器或选项卡将在没有任何提示的情况下关闭。

  <script type="text/javascript">

  $(document).ready(function() {

  $('#select_message').hide();    
  startTime = new Date().getTime();
  });

  loc = 0;
  block_size = {{ block_size }};
  sid = {{ sid }};
  survey  = {{ survey|tojson }}; 
  survey_choices = '';
  startTime = 0;
  demographics_content = {};

 function save_survey(sf)
  {       
      var timeSpentMilliseconds = new Date().getTime() - startTime;
      var t = timeSpentMilliseconds / 1000 / 60;
      var surveydat = '';
          if(sf==1)
          { //Success
              surveydat = 'sid='+sid+'&dem='+JSON.stringify(demographics_content)+'&loc='+loc+'&t='+t+'&survey_choice='+JSON.stringify(survey_choices);
          }
          if(sf==0)
          { //Fail
              surveydat = 'sid='+sid+'&dem='+json_encode(demographics_content)+'&loc='+loc+'&t='+t+'&survey_choice='+json_encode(survey_choices);
          }
          //Survey Save Call
          $.ajax({
          type: 'POST',
          url: '/save_surveyresponse/'+sf,
          data: surveydat,
          beforeSend:function(){
              // this is where we append a loading image
              $('#survey_holder').html('<div class="loading"><img src="/static/img/loading.gif" alt="Loading..." /></div>');
            },
          success:function(data){
              // successful request; do something with the data
              $('#ajax-panel').empty();
              $('#survey_holder').html('Success');
              alert("Dev Alert: All surveys are over! Saving data now...");
              window.location.replace('http://localhost:5000/surveys/thankyou');
            },
          error:function(){
              // failed request; give feedback to user
              $('#survey_holder').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
            }
          });


  }

  function verify_captcha()
  {
     // alert($('#g-recaptcha-response').html());
  }

  function block_by_block()
  {
      var div_content ='<table border="0" cellspacing="10" class="table-condensed"><tr>';
      var ii=0;
      var block = survey[loc];
      var temp_array = block.split("::");
      if(loc>=1)
      {
          var radio_val = $('input[name=block_child'+(loc-1)+']:checked', '#listform').val();
          //console.log(radio_val);
          if(radio_val!=undefined)
              survey_choices += radio_val +'\t';
          else
              {
                  alert("Please select one of the choices");
                  loc--;
                  return false;
              }

      }
      for(ii=0;ii<block_size;ii++)
      {
          //Chop the strings and change the div content
          div_content+="<td>" + temp_array[ii]+"</td>";
          div_content+="<td>" + ' <label class="btn btn-default"><input type="radio"  id = "block_child'+loc+'" name="block_child'+loc+'" value="'+temp_array[ii]+'"></label></td>';
          div_content+="</tr><tr>";
      }

      div_content+='<tr><td><input type="button" class="btn" value="Next" onClick="survey_handle()"></td><td>';
      div_content+='<input type="button" class="btn" value="Quit" onClick="quit_survey()"></td></tr>';
      div_content+="</table></br>";
      $("#survey_holder").html(div_content);

      //return Success;
  }

  function updateProgress()
  {

          var progress = (loc/survey.length)*100;
          $('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);
          $("#active-bar").html(Math.ceil(progress));
 }


  function survey_handle()
  {

      if(loc==0)
      {
          verify_captcha();
          $("#message").hide();
          //Save the participant data and start showing survey
          fetch_demographics(); 
          block_by_block();
          updateProgress();
          $('#select_message').show();    
      }
      else if(loc<survey.length)
      {
        block_by_block();
        updateProgress();
      }

      else if(loc == survey.length)
      {
          //Save your data and show final page
          $('#select_message').hide();    
          survey_choices += $('input[name=block_child'+(loc-1)+']:checked', '#listform').val()+'\t';
          //alert(survey_choices);
          //Great way to call AJAX
          save_survey(1);
      }
      loc++;
      return false;
  }
  </script>
  <script type="text/javascript">
      window.onbeforeunload = function() {
      var timeSpentMilliseconds = new Date().getTime() - startTime;
      var t = timeSpentMilliseconds / 1000 / 60;
      //fetch_demographics();
      save_survey(0);
      return "You have spent "+Math.ceil(t)+ " minute/s on the survey!"; 
      //!!delete last inserted element if not quit

  }
  </script>

我已经检查了这些函数是否有任何问题，但是当我从代码的不同部分调用它们时它们工作正常。后来，我认为这可能是因为函数范围不可达，但事实并非如此。我尝试在脚本末尾移动 onbeforeunload() ，但问题仍然存在。想知道为什么会这样，谁能赐教一下？

Answer 1

我确定了问题出在哪里。我正在使用 json_encode 而不是 JSON.stringify，因此它崩溃了（我已经在 sf=1 的情况下发现并更改了）。调试器的提示是无价的。此外，即使没有异步它也能正常工作：false.

再次感谢@AdrianoRepetti！

Javascript 'onbeforeunload()' 无法使用函数调用

Javascript 'onbeforeunload()' not working with a function call

javascript

onbeforeunload