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 相关文章推荐
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python实现决策树
2017/12/21 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
基于Redission的分布式锁实战
2022/08/14 Redis