浏览器冻结函数调用Jquery

时间:2013-08-30 01:28:22

标签: javascript jquery

函数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);
    });

1 个答案:

答案 0 :(得分:3)

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

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