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圆角插件
Oct 26 Javascript
eval的两组性能测试数据
Aug 17 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript基础之this详解
Jun 04 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JS实现简易计算器
Feb 14 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
jquery 手势密码插件
2017/03/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
九步学会Python装饰器
2015/05/09 Python
Python中encode()方法的使用简介
2015/05/18 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
二手房买卖协议书
2014/04/10 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
垂直极限观后感
2015/06/08 职场文书