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对象与JSON格式数据相互转换
Feb 20 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
JavaScript实现动态生成表格
Aug 02 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的curl实现get和post的代码
2008/08/23 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php分页示例分享
2014/04/30 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
js中replace的用法总结
2013/12/27 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Django框架表单操作实例分析
2019/11/04 Python
python内置模块collections知识点总结
2019/12/19 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
报到证丢失证明
2014/01/11 职场文书
政府信息公开实施方案
2014/05/09 职场文书
满月酒邀请函
2015/01/30 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang