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截取字符串的两种方法及区别详解
Nov 05 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
canvas多重阴影发光效果实现
Apr 20 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基础入门教程
2013/09/21 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
AngularJS 异步解决实现方法
2017/06/12 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python中的rjust()方法使用详解
2015/05/19 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
PyTorch的torch.cat用法
2020/06/28 Python
中科软笔试题和面试题
2014/10/07 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
学生实习推荐信范文
2013/11/26 职场文书
自主招生自荐信格式
2013/12/03 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers