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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
详解redux异步操作实践
Aug 15 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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函数
2006/10/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
pandas数值计算与排序方法
2018/04/12 Python
Python实现全排列的打印
2018/08/18 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
就业表自我评价分享
2014/02/06 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
租赁协议书
2015/01/27 职场文书
小学班长竞选稿
2015/11/20 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
JavaScript流程控制(循环)
2021/12/06 Javascript
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers