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 相关文章推荐
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
Vue和Flask通信的实现
May 19 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python中字典和集合学习小结
2017/07/07 Python
django中send_mail功能实现详解
2018/02/06 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
优秀管理者获奖感言
2014/02/17 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
党员服务承诺书
2014/05/28 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
实习证明格式范文
2014/10/14 职场文书
解约证明模板
2015/06/19 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫