javascript - 函数调用 Jquery 时浏览器卡住

Question

函数 loadPage 导致浏览器在每次加载时卡住。

如果我取消注释 $("#responsedcontainer").load("widget.php"); 它不会导致浏览器卡住，但如果使用函数 loadPage 它会。如果只使用加载功能，其他功能都不会运行。

我的 jquery 非常有限，正在努力学习。希望这是有道理的。

var beforeLoadData = [];

    function loadPage( url ){
        var ajax = new XMLHttpRequest();
        ajax.open("GET", url , false);
        ajax.send(null);
        $("#responsedcontainer").html( ajax.responseText );
    }

    function saveTableData(){
        beforeLoadData = []       
        $("td.changeable").each( function(){
            beforeLoadData.push( { "key": $(this).attr('id'), "value": $(this).text() } );
        }); 
    }

    function getSavedValueFor( key ){
        for( var i in beforeLoadData ){
            if( beforeLoadData[i].key === key )
                return i;
        }
        return -1;
    }

    function checkTableData(){
        $("td.changeable").each( function(){
            var thisValue = { "key": $(this).attr('id'), "value": $(this).text() };
            var index = getSavedValueFor( thisValue.key );
            if( index >= 0){
                if( beforeLoadData[index].value > thisValue.value )
                    $( "td#"+thisValue.key ).addClass( 'updated' );
                if( beforeLoadData[index].value < thisValue.value )
                    $( "td#"+thisValue.key ).addClass( 'minus' );  
                } 

        });
    }

    function removeUpdatedClass( ){
        setTimeout( function(){
            $('td.updated').removeClass('updated');
            $('td.minus').removeClass('minus');
        },4000);
    }


    $(function(){
        saveTableData();
        //$("#responsedcontainer").load("widget.php");
        loadPage( "widget.php" );
        checkTableData();
        removeUpdatedClass();
        var refreshId = setInterval(function() {
            saveTableData();
            //$("#responsedcontainer").load("widget.php?randval="+ Math.random());
            loadPage("widget.php?randval="+ Math.random());
            checkTableData();
            removeUpdatedClass();
        }, 5000);
    });

Answer 1

行ajax.open("GET", url , false);应该是 ajax.open("GET", url , true); .

第三个参数( bool 值)是请求是否应该是异步的，这将是对数据的非 DOM 阻塞调用。