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＆＃39; onbeforeunload（）＆＃39;不使用函数调用

1 个答案: