jquery - Chrome : Throttling history state changes to prevent the browser from hanging. ReactJs 和 jQuery

Question

I am just changing the url when page go to particular height. but it shows me error in the chrome :Throttling history state changes to prevent the browser from hanging. after 1200 height. but it is working fine in the firefox so some one know how to prevent from this warning if yes please tell me ?

 function myFunction(){
            var h = ($("html").scrollTop());
                        if(h == 0){
                             window.history.pushState(null,null,'/');
                            // console.log("0oo");
                        }
                        else if(h >= 1 && h <= 600){
                             window.history.pushState(null,null,"abc");
                            // console.log("test");
                        }
                        else if (h >= 600 && h <= 1200) {
                            history.pushState(null, null, 'def');
                            // console.log("test1");
                        }
                        else if (h >= 1200 && h <= 1800) {
                            history.pushState(null, null, 'ghi');
                            // console.log("test2");
                        }
                        else if (h >= 1800 && h <= 2400) {
                            history.pushState(null, null, 'jkl');
                            // console.log("test3");
                        }
                        else if (h >= 2400 && h <= 3000) {
                            history.pushState(null, null, 'mno');
                            // console.log("test4");
                        }
                        else if (h >= 3000 && h <= 3600) {
                            history.pushState(null, null, 'pqr');
                            // console.log("test5");
                        }
                        else if (h >= 3600 && h <= 4200) {
                            history.pushState(null, null, 'stu');
                            // console.log("test6");
                        }
                        else{

                        }
    }

Answer 1

我也遇到了同样的问题 - 我通过在更改路径名之前检查当前路径名以确定是否需要更改它来解决这个问题。这极大地减少了历史状态更改的数量，因此避免了此警告。

将这个想法应用到您的代码中，我会这样做:

if(h == 0){
    if (window.location.pathname !== "/") {
        window.history.pushState(null,null,'/');
    }
}
else if(h >= 1 && h <= 600){
    if (window.location.pathname !== "abc") {
        window.history.pushState(null,null,"abc");
    }
}
... etc
else if (h >= 3600 && h <= 4200) {
    if (window.location.pathname !== "stu") {
        window.history.pushState(null,null,"stu");
    }
}