远程加载 耗时javascript 脚本时,没法取消其执行
2013-03-26 12:20
351 查看
1. 问题描述
在做网络应用程序时,经常会有这样的情况产生,用户在前端操作过快时,会以较快的时间间隔向服务器发送请求,而服务器端会返回 JS 脚本更改客户端的状态,在这种情况下,服务器端返回的 JS 脚本会发生重叠,我们可能想如果在用户发送请求时判断前一次请求的结果是否已返回,如果没有返回,则取消掉前次的请求结果。2. 代码模拟
用户请求的 前台页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>远程脚本加载过程中删除脚本的效果</title> <script type="text/javascript"> var loadJS = function (url, success, id) { var domScript = document.createElement('script'); domScript.src = url; domScript.id = id; document.getElementsByTagName('head')[0].appendChild(domScript); setTimeout(function() { domScript.parentNode.removeChild(domScript); }, 500); }; function load_remote_script() { loadJS('http://localhost/project/test/JS-Program/remote_script_loading_del_effect/remote.php', null, 'remote'); } </script> </head> <body> <input type="text" id="info" /> <button onclick="load_remote_script()">加载远程脚本</button> </body> </html>
模拟服务器端生成JS脚本的页面(用PHP编写)
<?php sleep(3); echo "document.getElementById('info').value++;" ?>
3. 测试总结
点击 加载远程脚本按钮后, 在0.5s后就从 HTML页面中 remove掉脚本。发现 input 中的值还是增加了。即使在 remove 掉脚本后,立刻将 domScript =null ,结果也是一样。结论:尽管在返回脚本前就把脚本从页面中移除,脚本返回后的代码依然执行。
4. 可能的方案
一旦加载脚本后,除非出现页面错误,浏览器会一定会执行该脚本返回后的内容。该怎么解决这个问题呢,我觉得可以在返回的 脚本中解决。如下所示:<?php sleep(3); echo "if(document.getElementById('remote')) document.getElementById('info').value++;" ?>
相关文章推荐
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
- 《高性能 JavaScript》笔记(一):脚本加载和执行
- 编写高性能的JavaScript 脚本的加载与执行
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
- 编写高性能的JavaScript-脚本的加载与执行(1)
- 编写高性能的JavaScript 脚本的加载与执行
- 探析浏览器执行JavaScript脚本加载与代码执行顺序
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
- 高性能JavaScript-JS脚本加载与执行对性能的影响
- 编写高性能的JavaScript 脚本的加载与执行
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
- 调用 WebView 的 loadUrl 加载页面后 Javascript 脚本不执行
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
- 如何设置WebView使得加载网页时能够执行JavaScript脚本中的alert()函数
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- 编写高性能的JavaScript-脚本的加载与执行(2)
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
- 探析浏览器执行JavaScript脚本加载与代码执行顺序