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之如何使用回调函数
May 16 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
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与javascript的两种交互方式
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
基于python编写的微博应用
2014/10/17 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python常用库推荐
2016/12/04 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
优良学风班总结材料
2014/02/08 职场文书
小学国庆节活动方案
2014/02/11 职场文书
班主任个人工作反思
2014/04/28 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
政风行风建设责任书
2014/07/23 职场文书
教师求职信怎么写
2015/03/20 职场文书
会议主持词结束语
2015/07/03 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL