KeleQAQ
KeleQAQ
采纳率20%
2020-05-12 19:13

JS里出现[Violation] 'click' handler took 1143ms 是什么意思?

详情可以看我的链接:
问题链接


主要内容是用JS实现翻页

图片的警告是怎么回事,这就是我的问题。

图片说明


下面我也把代码再复制一遍。



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS实现分页</title>
    </head>
    <body>
        <script>
            var array=[];
            var obj1={
                title:"JAVA入门",
                author:"小红",
                publish:"工业出版社",
                tag:"计算机"
            };
            var obj2={
                title:"C入门",
                author:"小明",
                publish:"工业出版社",
                tag:"计算机"
            };
            var obj3={
                title:"湖北菜大全",
                author:"大强",
                publish:"人民出版社",
                tag:"菜谱"
            };
            var obj4={
                title:"健身舞蹈",
                author:"张小姐",
                publish:"人民出版社",
                tag:"舞蹈"
            };
            var obj5={
                title:"英语口语",
                author:"可乐",
                publish:"湖北出版社",
                tag:"英语"
            };
            array.push(obj1,obj2,obj3,obj4,obj5);
        </script>
        <input type="text" id="inputtext" />
        <input type="button" id="sub" value="提交" onclick="showData()"/>
        <table id="tab">
            <thead id="tabhead">
                <!-- 显示表头 -->
            </thead>

            <tbody id="tabcontext">
                <!-- 开始显示内容 -->
                <!-- 设置每次最多显示2行类容 -->
            </tbody>

            <tfoot id="tabfoot">
                <!-- 显示表尾 -->
            </tfoot>
        </table>

        <script>

            var totalPage=0;//totalPage是总分页数
            var e=2;//e 是每页显示多少行数据
            var totalCount=0;//totalCount是总共有多少行数据
            var currentPage=1;//currentPage是当前页面,初始为1

            var firstDate=0;//每个页面的第1个数据的数组下标
            var lastDate=e-1;//每个页面的最后1个数据的数组下标

            totalCount=array.length;
            totalPage=(totalCount%e==0?totalCount/e:parseInt(totalCount/e+1));//求出总分页数


            function showData(){
                //每次显示前先清空数据,防止重复显示
                document.getElementById("tabhead").innerHTML="";
                document.getElementById("tabfoot").innerHTML="";
                document.getElementById("tabcontext").innerHTML="";
                //显示表头和表尾
                document.getElementById("tabhead").innerHTML="<tr><td>书名</td>"+
                "<td>作者</td>"+
                "<td>出版社</td>"+
                "<td>标签</td></tr>"
                document.getElementById("tabfoot").innerHTML="<tr><td><input type=\"button\" value=\"上一页\" id=\"pre\" onclick=\"showPre()\" /></td>"+
                "<td><input type=\"button\" value=\"第1页\" id=\"current\" /></td>"+
                "<td><input type=\"button\" value=\"下一页\" id=\"next\" onclick=\"showNext()\"/></td>"+
                "<td><input type=\"button\" value=\"共"+totalCount+"条记录\" id=\"sum\" /></td>";

                show(firstDate,lastDate);//显示数据函数

            }


            function showPre(){

                //判断是否是边界
                if(currentPage<=1){
                    alert("没有更多记录!");
                }else{
                    firstDate-=e;
                    lastDate-=e;
                    currentPage--;
                    document.getElementById("current").setAttribute("value","第"+currentPage+"页");
                    show(firstDate,lastDate);
                }

            }

            function showNext(){
                //判断是否是边界
                if(currentPage>=totalPage){
                    alert("没有更多记录!");
                }else{
                    firstDate+=e;
                    lastDate+=e;
                    currentPage++;
                    document.getElementById("current").setAttribute("value","第"+currentPage+"页");
                    show(firstDate,lastDate);
                }

            }
            function show(first,last){
                document.getElementById("tabcontext").innerHTML="";//清空数据
                if(last>array.length-1){
                    last=array.length-1;
                }
                for(;first<=last;first++){
                    var fathernode=document.getElementById("tabcontext");
                    var trele=document.createElement("tr");
                    fathernode.appendChild(trele);
                    var tds="<td>"+array[first].title+"</td>"+
                    "<td>"+array[first].author+"</td>"+
                    "<td>"+array[first].publish+"</td>"+
                    "<td>"+array[first].tag+"</td>";
                    trele.innerHTML=tds;
                }
            }
        </script>

    </body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • weixin_43913627 千叶一风 2月前
    setInterval(function(){
                            var trolleyCar = JSON.parse(JSON.stringify(self.trolleyCar11));
                            self.option.graphic.push(ladleCreat({
                                parentKey: 'trolleyCar11',
                                status: 1, //1正常,2警告,3报错
                                x: trolleyCar.x,
                                y: trolleyCar.y,
                            }))
                            setInterval(function() {
                                self.initComponent()
                            }, self.config.refreshTime)
                        },2000)
    点赞 评论 复制链接分享
  • dashicaineng 蔡能教授,网站特聘专家 11月前
    点赞 评论 复制链接分享

为你推荐