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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
javascript中layim之查找好友查找群组
Feb 06 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数学运算
2011/12/30 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
测试php函数的方法
2013/11/13 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
聊聊python中的循环遍历
2020/09/07 Python
环保倡议书
2014/04/14 职场文书
法制演讲稿
2014/09/10 职场文书
孝女彩金观后感
2015/06/10 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python