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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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
Terran历史背景
2020/03/14 星际争霸
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
Web程序工作原理详解
2014/12/25 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
js字符编码函数区别分析
2008/06/05 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Python 的 with 语句详解
2014/06/13 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Django之模板层的实现代码
2019/09/09 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
土木工程专业大学毕业生求职信
2013/10/13 职场文书
销售总经理岗位职责
2014/03/15 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
CAD实训总结范文
2015/08/03 职场文书
2016国培学习心得体会
2016/01/08 职场文书