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 全选效果实现代码
Mar 23 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
浅谈$('div a') 与$('div>a')的区别
Jul 18 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue中使用腾讯云Im的示例
Oct 23 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中SimpleXML函数用法分析
2014/11/26 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JS实现电商放大镜效果
2017/08/24 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python自带的http模块详解
2016/11/06 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python绘制直线的方法
2018/06/30 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python numpy 按行归一化的实例
2019/01/21 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
大学生就业意向书
2015/05/11 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers