js只执行1次的函数示例


Posted in Javascript onJuly 20, 2016

在我们日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。

废话不多说,直接上代码:

function runOnce(fn, context) { //控制让函数只触发一次
  return function () {
    try {
      fn.apply(context || this, arguments);
    }
    catch (e) {
      console.error(e);//一般可以注释掉这行
    }
    finally {
      fn = null;
    }
  }
}
 
// Usage 1:
var a = 0;
var canOnlyFireOnce = runOnce(function () {
  a++;
  console.log(a);
});
 
canOnlyFireOnce(); //1
canOnlyFireOnce(); // nothing
canOnlyFireOnce(); // nothing
 
// Usage 2:
var name = "张三";
var canOnlyFireOnce = runOnce(function () {
  console.log("你好" + this.name);
});
canOnlyFireOnce(); //你好张三
canOnlyFireOnce(); // nothing
 
// Usage 3:
var obj = {name: "天涯孤雁", age: 24};
var canOnlyFireOnce = runOnce(function () {
  console.log("你好" + this.name);
}, obj);
canOnlyFireOnce(); //你好天涯孤雁
canOnlyFireOnce(); // nothing

因为返回函数执行一次后,fn = null将其设置未null,所以后面就不会执行了。再贴一个网上别人分享的代码,道理一样的:

function once(fn, context) { 
  var result;
 
  return function() { 
    if(fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
 
    return result;
  };
}
 
// Usage
var canOnlyFireOnce = once(function() {
  console.log('Fired!');
});
 
canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nothing

以上就是为大家整理让javascript只执行一次的函数示例,有需要的可以参考。

Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
JQuery为元素添加样式的实现方法
Jul 20 #Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 #Javascript
javaScript给元素添加多个class的简单实现
Jul 20 #Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
JavaScript中的splice方法用法详解
Jul 20 #Javascript
Bootstrap被封装的弹层
Jul 20 #Javascript
You might like
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
简单的三步vuex入门
2018/05/20 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python解析含有重复key的json方法
2019/01/22 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
酒店服务与管理毕业生求职信
2013/11/02 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
战略合作意向书范本
2014/04/01 职场文书
最美家庭活动方案
2014/08/31 职场文书
工作证明格式及范本
2014/09/12 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
交通事故被告答辩状
2015/05/22 职场文书
2016国培学习心得体会
2016/01/08 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android