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 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
javascript学习之闭包分析
Dec 02 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
动态添加js事件实现代码
2009/03/12 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
远程教育心得体会
2014/01/03 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
万能检讨书
2015/01/27 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript