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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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函数,php爱好者站推荐
2007/03/19 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
实例解析Array和String方法
2016/12/14 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python实现自动重启本程序的方法
2015/07/09 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python logging模块handlers用法详解
2020/08/14 Python
类和结构的区别
2012/08/15 面试题
个人找工作的自我评价
2013/10/17 职场文书
美国留学经济担保书
2014/05/20 职场文书
市场营销毕业求职信
2014/08/07 职场文书
2016情人节宣传语
2015/07/14 职场文书
校长新学期寄语2016
2015/12/04 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers