몇 초 동안 브라우저가 멈춤

Question

다음 코드가 실행 중일 때 브라우저가 몇 초 동안 멈 춥니 다. 어떻게 방지 할 수 있습니까? 유래/ 암호 : 당신은 http://www.ocsl.ch/dev 이름의 양식을 찾을 수

감사

function rsfp_changePage(formId, page, totalPages, validate) 
{ 
if (validate) 
{ 
    var form = rsfp_getForm(formId); 
    if (!ajaxValidation(form, page)) 
     return false; 
} 

for (var i=0; i<=totalPages; i++) 
{ 
    var thePage = document.getElementById('rsform_' + formId + '_page_' + i); 
    if (thePage) 
     document.getElementById('rsform_' + formId + '_page_' + i).style.display = 'none'; 
} 

var thePage = document.getElementById('rsform_' + formId + '_page_' + page); 
if (thePage) 
{ 
    thePage.style.display = ''; 
    try { 
     eval('if (typeof rsfp_showProgress_' + formId + ' == "function") rsfp_showProgress_' + formId + '(' + page + ')'); 
    } 
    catch (err) { } 
} 
} 

은 ... 첫째 로그인 유래하고 일단이 페이지에 http://www.ocsl.ch/dev/sejour-linguistique/adultes/demande-d-offre-en-ligne 로 이동, 녹색 클릭 버튼 "suivant"그리고 당신은 그것이 아주 작은 의지로 얼어 버린 것을 볼 수 있습니다. 콘텐츠 양식 아래에 ajaxvalidation 기능을 포함하는 script.js 파일이 있습니다. 희망이 조금 도움이됩니다. 도움이 될만한 다른 것이 필요한지 물어보십시오.

function refreshCaptcha(componentId, captchaPath) 
{ 
if(!captchaPath) captchaPath = 'index.php?option=com_rsform&task=captcha&componentId=' + componentId; 
document.getElementById('captcha' + componentId).src = captchaPath + '&' + Math.random(); 
document.getElementById('captchaTxt' + componentId).value=''; 
document.getElementById('captchaTxt' + componentId).focus(); 
} 

function number_format(number, decimals, dec_point, thousands_sep) 
{ 
var n = number, prec = decimals; 
n = !isFinite(+n) ? 0 : +n; 
prec = !isFinite(+prec) ? 0 : Math.abs(prec); 
var sep = (typeof thousands_sep == "undefined") ? ',' : thousands_sep; 
var dec = (typeof dec_point == "undefined") ? '.' : dec_point; 

var s = (prec > 0) ? n.toFixed(prec) : Math.round(n).toFixed(prec); //fix for IE parseFloat(0.55).toFixed(0) = 0; 

var abs = Math.abs(n).toFixed(prec); 
var _, i; 

if (abs >= 1000) { 
    _ = abs.split(/\D/); 
    i = _[0].length % 3 || 3; 

    _[0] = s.slice(0,i + (n < 0)) + 
      _[0].slice(i).replace(/(\d{3})/g, sep+'$1'); 

    s = _.join(dec); 
} else { 
    s = s.replace('.', dec); 
} 

return s; 
} 

function buildXmlHttp() 
{ 
var xmlHttp; 
try 
{ 
    xmlHttp=new XMLHttpRequest(); 
} 
catch (e) 
{ 
    try 
    { 
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) 
    { 
     try 
     { 
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch (e) 
     { 
      alert("Your browser does not support AJAX!"); 
      return false; 
     } 
    } 
} 
return xmlHttp; 
} 

function ajaxValidation(form, page) 
{ 
try 
{ 
    var el = form.elements.length; 
} 
catch (err) 
{ 
    form = this; 
} 

var xmlHttp = buildXmlHttp(); 
var url = 'index.php?option=com_rsform&task=ajaxValidate'; 

if (page) 
    url += '&page=' + page; 

var params = new Array(); 
var submits = new Array(); 
var success = false; 
var formId = 0; 
for (i=0; i<form.elements.length; i++) 
{ 
    // don't send an empty value 
    if (!form.elements[i].name) continue; 
    if (form.elements[i].name.length == 0) continue; 
    // check if the checkbox is checked 
    if (form.elements[i].type == 'checkbox' && form.elements[i].checked == false) continue; 
    // check if the radio is selected 
    if (form.elements[i].type == 'radio' && form.elements[i].checked == false) continue; 

    if (form.elements[i].type == 'submit') 
    { 
     submits.push(form.elements[i]); 
     form.elements[i].disabled = true; 
    } 

    // check if form is a dropdown with multiple selections 
    if (form.elements[i].type == 'select-multiple') 
    { 
     for (var j=0; j<form.elements[i].options.length; j++) 
      if (form.elements[i].options[j].selected) 
       params.push(form.elements[i].name + '=' + encodeURIComponent(form.elements[i].options[j].value)); 

     continue; 
    } 

    if (form.elements[i].name == 'form[formId]') 
     formId = form.elements[i].value; 

    params.push(form.elements[i].name + '=' + encodeURIComponent(form.elements[i].value)); 
} 

params = params.join('&'); 

xmlHttp.open("POST", url, false); 

//Send the proper header information along with the request 
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlHttp.setRequestHeader("Content-length", params.length); 
xmlHttp.setRequestHeader("Connection", "close"); 
xmlHttp.send(params); 
var success = true; 

if (xmlHttp.responseText.indexOf("\n") != -1) 
{ 
    var response = xmlHttp.responseText.split("\n"); 
    // All spans set to no error 
    var ids = response[0].split(','); 
    for (var i=0; i<ids.length; i++) 
     if (!isNaN(parseInt(ids[i])) && document.getElementById('component'+ids[i])) 
      document.getElementById('component'+ids[i]).className = 'formNoError'; 

    // Show errors 
    var ids = response[1].split(','); 
    for (var i=0; i<ids.length; i++) 
     if (!isNaN(parseInt(ids[i])) && document.getElementById('component'+ids[i])) 
     { 
      document.getElementById('component'+ids[i]).className = 'formError'; 
      success = false; 
     } 

    if (response.length == 4) 
    { 
     page = parseInt(response[2]) - 1; 
     totalPages = parseInt(response[3]); 
     rsfp_changePage(formId, page, totalPages, false); 
    } 

    for (var i=0; i<submits.length; i++) 
     submits[i].disabled = false; 
} 

if (success == false && document.getElementById('rsform_error_' + formId)) 
{ 
    try { 
     document.getElementById('rsform_error_' + formId).style.display = ''; 
    } 
    catch (err) { } 
} 

return success; 
} 

function rsfp_addEvent(obj, evType, fn){ 
if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, false); 
    return true; 
} else if (obj.attachEvent){ 
    var r = obj.attachEvent("on"+evType, fn); 
    return r; 
} else { 
    return false; 
} 
} 

function rsfp_getForm(formId) 
{ 
var formIds = document.getElementsByName('form[formId]'); 
for (var i=0; i<formIds.length; i++) 
{ 
    if (parseInt(formIds[i].value) != parseInt(formId)) 
     continue; 

    var form = formIds[i].parentNode;  
    if (form.tagName == 'FORM' || form.nodeName == 'FORM') 
     return form; 

    while (form.parentNode) 
    { 
     form = form.parentNode; 
     if (form.tagName == 'FORM' || form.nodeName == 'FORM') 
      return form; 
    } 
} 
} 

---

감사 @JuanMendes, 그것은 불행히도 도움이되지 않았다. 비동기 요청을 보내도록 코드를 수정하는 방법을 알기 위해 몇 가지 reaserch를 만들었지 만 성공하지 못했습니다. 내가

xmlHttp.open("POST", url, true); 

그 다음 비동기 요청해야한다로 변경하면 ajaxValidation의 fonction에서

xmlHttp.open("POST", url, false); 

있다, 그것은되지 않습니다.

테스트했을 때 브라우저가 멈추지 않았지만 필드가 양식에 채워지지 않으면 오류가 표시되지 않습니다. 대신, 그것은 의미가없는 것을 확인합니다. 어떤 도움이 필요합니까?

Answer 1

IAbstractDownvoteFactory에서 언급했듯이 동기식 모드에서 ajax를 호출 할 수 있습니다. 즉, 네트워크 호출을 기다리는 동안 화면을 고정시킵니다.

이렇게 보이는 이유는 ajaxValidation이 값을 반환하고 있기 때문입니다. 일반적으로 비동기 요청을 보내고 ajaxValidation은 콜백을받습니다. 그런 다음 UI가 XHR을 기다리지 않고 기다리지 않습니다.

// This is an improvement over what you had 
// Still poor code, since it's hard to tell what the function is doing 
function rsfp_changePage(formId, page, totalPages, validate) 
{ 
    var form = rsfp_getForm(formId); 
    if (validate) { 
    // Change your AJAX validation function to take a callback, which passes the return 
    // value (asynchronous) instead of relying on a return value (synchronous) 
    ajaxValidation(form, page, function(validationResult){ 
     if (validationResult) { 
     showProgress(); 
     } 
    });   
    } else { 
    showProgress(); 
    } 

    function showProgress() { 
    for (var i=0; i<=totalPages; i++) { 
     var thePage = document.getElementById('rsform_' + formId + '_page_' + i); 
     if (thePage) { 
     thePage .style.display = 'none'; 
     } 

     var thePage = document.getElementById('rsform_' + formId + '_page_' + page); 
     if (thePage) { 
     thePage.style.display = ''; 
     // Don't use eval, use window and bracket to avoid it 
     var func = window["rsfp_showProgress_" + formId]; 
     if (typeof func == "function") { 
      func(page); 
     } 
     } 
    }   
    }  
}