动态加载js的异步与同步方法

同步加载(会阻塞后续代码执行)

loadAsyncScript(src, callback = function () {}) { // 同步加载js
        const head = document.getElementsByTagName('head')[0];
        const script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', src);
        script.setAttribute('async', true);
        script.setAttribute('defer', true);
        head.appendChild(script);

        if (script.readyState) { // ie
            script.onreadystatechange = function () {
                var state = this.readyState;
                if (state === 'loaded' || state === 'complete') {
                    callback();
                }
            }
        } else {
            script.onload = function () {
                callback();
            }
        }
    },

异步加载JS 

    loadJS(src) { // 异步加载js
        const s = document.createElement('script');
        s.setAttribute('src', src);
        s.setAttribute('charset', 'utf-8');
        document.body.appendChild(s);
    },

使用例子

loadAsyncScript("__SYS_GLOBAL_URL__static/app/js/tvp.player_v2_zepto.js", function () {
            loadAsyncScript("__SYS_GLOBAL_URL__static/app/js/video.js", function () {
                _player = new MyPlayer(pageGlobal)
            });
        });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在实现分页效果时,同步异步是两种不同的方式。 1. 同步方式:在同步方式下,页面在进行分页操作时会等待服务器返回所有数据后再进行页面渲染。这意味着用户需要等待较长时间才能看到完整的分页结果,因为服务器需要处理所有数据并一次性返回。 2. 异步方式:在异步方式下,页面在进行分页操作时会立即发送请求给服务器,并使用异步技术(如Ajax)获取数据。服务器会根据请求返回对应的分页数据,然后前端会根据返回的数据进行页面渲染,无需等待所有数据返回。这样用户可以更快地看到分页结果,并且可以在数据加载过程中进行其他操作。 在实际应用中,异步实现分页效果更为常见和推荐。它能够提升用户体验,减少等待时间,并允许用户与页面进行交互。一般来说,可以通过以下步骤来实现异步分页效果: 1. 在前端页面中添加分页组件,如翻页按钮或滚动触发加载更多数据的事件。 2. 当用户触发分页操作时,前端通过Ajax等方式向服务器发送请求,并传递当前页码等参数。 3. 服务器接收到请求后,根据参数计算出对应的分页数据,并将其返回给前端。 4. 前端接收到服务器返回的数据后,使用JavaScript等技术对页面进行渲染,更新分页结果。 5. 用户可以根据需要继续进行分页操作,重复上述步骤。 需要注意的是,在异步方式下,服务器端也需要支持分页查询,并能够根据前端传递的参数返回对应的分页数据。同时,前端需要处理分页数据的渲染和更新逻辑。这样可以实现更流畅的分页效果,并提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wflynn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值