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 常用方法经典总结
Jan 28 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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 身份证号验证函数
2009/05/07 PHP
基于empty函数的输出详解
2013/06/17 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
python aiohttp的使用详解
2019/06/20 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
审核会计岗位职责
2013/11/08 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
公司经理聘任书
2014/03/29 职场文书
学生犯错保证书
2015/05/09 职场文书
2015中学学校工作总结
2015/07/20 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers