requestAnimationFrame学习笔记

最新推荐文章于 2023-02-15 10:03:09 发布

vip_guo

最新推荐文章于 2023-02-15 10:03:09 发布

阅读量391

点赞数

分类专栏： javaScript 文章标签： api

本文链接：https://blog.csdn.net/VIP_guo/article/details/79078358

版权

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>requestAnimationFrame学习笔记</title>
</head>
<body>
    <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
    <input type="button" value="Run" id="run"/>
    <ul id="js-list"></ul>
    <script>
        //============================================
        /* *
        window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果；方法用于通知浏览器重采样动画。
        当requestAnimationFrame(callback)被调用时不会执行callback，而是会将元组< handle,callback>插入到动画帧请求回调函数列表末尾（其中元组的callback就是传入requestAnimationFrame的回调函数），并且返回handle值，该值为浏览器定义的、大于0的整数，唯一标识了该回调函数在列表中位置。
        每个回调函数都有一个布尔标识cancelled，该标识初始值为false，并且对外不可见。
         */ 
        //============================================
        //事例代码1：（转 王仕军老师）
        //最外层用一个 立即执行函数表达式（IIFE）作用：不产生全局变量，也避免变量名冲突的风险
        (() => {
            const ndList = document.getElementById('js-list');
            if(!ndList) return;
            const total = 30;//总条数；
            const batchSize = 4;// 每批插入的节点数，越大越卡；
            let batchCount = total/batchSize;// 需要批量处理多少次；
            let batchDone = 0;//已经完成多少批
            appendItems= () => {
                let frament = document.createDocumentFragment();
                for(let i = 0;i < batchSize;i++){
                    let ndLi = document.createElement('li');
                    ndLi.innerText = (batchDone * batchSize) + i + 1;
                    frament.appendChild(ndLi);
                }
                //每次处理只修改1次DOM；
                ndList.appendChild(frament);
                batchDone +=1;
                doBatchAppend();
            }
            doBatchAppend = () => {
                if(batchDone < batchCount) window.requestAnimationFrame(appendItems)
            }
            doBatchAppend();

            ndList.addEventListener('click',function (e) {
                let target = e.target;
                if(target.tagName === 'LI'){
                    alert(target.innerText)
                }
            })
        })()
        //================================================================
        /**
        另注：补充几种常用动态创建html节点的方法
        · crateAttribute(name)：　　　　　 　　 用指定名称name创建特性节点
        · createComment(text)：　　　　　　　   创建带文本text的注释节点
        · createDocumentFragment()：　　　　   创建文档碎片节点
        · createElement(tagname)：　　　　　   创建标签名为tagname的节点
        · createTextNode(text)：　　　　　　   创建包含文本text的文本节点
        document_createDocumentFragment()说白了就是为了节约使用DOM，提高性能。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中
        **/
        //================================================================
        // 事例代码2：（网上觅到的?）
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var start = null;
        var ele = document.getElementById("test");
        var progress = 0;

        function step(timestamp) {
            progress += 1;
            ele.style.width = progress + "%";
            ele.innerHTML=progress + "%";
            if (progress < 100) {
                start=requestAnimationFrame(step);
            }
        }
        requestAnimationFrame(step);
        document.getElementById("run").addEventListener("click", function() {
            ele.style.width = "1px";
            progress = 0;
            cancelAnimationFrame(start);//每次点击先清除再开始，解决大于100%bug
            requestAnimationFrame(step);
        }, false);
        
        /************************************************************************/
        //以上是看到网上的文章进行总结，仅用于学习记录
        /************************************************************************/
    </script>
</body>
</html>

vip_guo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
requestAnimationFrame学习笔记

requestAnimationFrame学习笔记 0% //============================================ /* * window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果；方法用于通知浏览器重采样动画。
复制链接

扫一扫