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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
基于Django用户认证系统详解
2018/02/21 Python
浅谈python写入大量文件的问题
2018/11/09 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
销售找工作求职信
2013/12/20 职场文书
会计实训总结范文
2015/08/03 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Python进程间的通信之语法学习
2022/04/11 Python