JavaScript学习笔记整理_setTimeout的应用


Posted in Javascript onSeptember 19, 2016

setTimeou的t应用

var ids = [];
function foo1(i) {
  this.i = i;
  console.log('i = '+i);
  ids[0] = setTimeout((function () {
    foo1(i);
  }),1000);
}
function foo2(j) {
  this.j = j;
  console.log('j = '+j);
  ids[1] = setTimeout((function () {
    foo2(j);
  }),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
clearTimeout(ids[1]);

当 setTimeout(f,n) 被调用时,它会返回一个 ID 标识并且计划在将来大约n毫秒后调用f函数。 f函数只会被执行一次(递归执行的话就可以实现每n毫秒执行一次),基于 JavaScript 引擎的计时策略,以及本质上的单线程运行方式,所以其它代码的运行可能会阻塞此线程。 因此没法确保函数会在 setTimeout 指定的时刻被调用。通过在回调函数内部使用 setTimeout 函数来防止阻塞!

JavaScript 是异步的,setTimeout 只会执行回调函数一次,不过 setInterval会每隔 X 毫秒执行函数一次。 但是却不鼓励使用这个函数。当回调函数的执行被阻塞时,setInterval 仍然会发布更多的回调指令。在很小的定时间隔情况下,这会导致回调函数被堆积起来。

setTimeout 和 setInterval 也接受第一个参数为字符串的情况。 这个特性绝对不要使用,因为它在内部使用了隐藏的eval,由于 eval 在这种情况下不是被直接调用,因此传递到 setTimeout 的字符串会自全局作用域中执行,建议不要在调用定时器函数时,为了向回调函数传递参数而使用字符串的形式;当需要向回调函数传递参数时,可以创建一个匿名函数,在函数内执行真实的回调函数;

onscolll,onresize等是非常耗性能,那如果我们换成ajax请求的话,那么就会缩放一次窗口会连续触发多次ajax请求,下面我们试着使用函数节流的操作试试一下;当然加个settimeout()的定时器就好了,

第一种封装方法

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
window.onresize = function () {
  delayFun(oCount)
};

function delayFun(method, thisArg) {
  clearTimeout(method.props);
  method.props = setTimeout(function () {
    method.call(thisArg)
  }, 200)
}

第二种封装方法

构造一个闭包,使用闭包的方式形成一个私有的作用域来存放定时器timer, timer是通过传参数的形式引入的。

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
  funs()
};

function delayFun(func, wait) {
  var timer = null;
  return function () {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(context, args);
    }, wait)
  };
}

对第二种方法优化一下,性能会更好

这里返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递 ‘immediate' 参数,会马上将函数安排到执行队列中,而不会延迟。

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// 用法
var myEfficientFn = delayFun (function() {
  // 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。

setTimeout这么厉害,那么我们是可以在项目中大量使用吗?

我个人是不建议的,在我们业务中,基本上是禁止在业务逻辑中使用setTimeout的,因为我所看到的很多使用方式都是一些问题不好解决,setTimeout作为一个hack的方式。

例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个setTimeout,确保实例先初始化。

为什么错误?这里其实就是使用hack的手段

第一是埋下了坑,打乱模块的生命周期

第二是出现问题时,setTimeout其实是很难调试的。

我认为正确的使用方式是,看看生命周期(可参考《关于软件的生命周期 》),把实例化提到使用前执行

以上就是小编为大家带来的JavaScript学习笔记整理_setTimeout的应用的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 #Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 #Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 #Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 #Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 #Javascript
js中用cssText设置css样式的简单方法
Sep 19 #Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 #Javascript
You might like
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JS清除选择内容的方法
2015/01/29 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
django初始化数据库的实例
2018/05/27 Python
python让列表倒序输出的实例
2018/06/25 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python异常处理知识点总结
2019/02/18 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
迟到检讨书900字
2014/01/14 职场文书
小学教师管理制度
2014/01/18 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2014年城管工作总结
2014/11/20 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
运动会200米广播稿
2015/08/19 职场文书
java解析XML详解
2021/07/09 Java/Android