js只执行1次的函数示例

 更新时间:2016年07月20日 11:38:39   投稿:daisy  
本文通过代码示例给大家展示了如何让javascript只执行一次,如何实现这种功能呢?通过下面这段就可以轻松搞定了。

在我们日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。

废话不多说,直接上代码:

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只执行一次的函数示例,有需要的可以参考。

相关文章

  • 微信小程序实现星级评价效果

    微信小程序实现星级评价效果

    这篇文章主要为大家详细介绍了微信小程序实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 图片上传插件jquery.uploadify详解

    图片上传插件jquery.uploadify详解

    如果页面没有显示“BROWSE”按钮,则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对,检查下路径是否正确
    2013-11-11
  • layer.alert回调函数执行关闭弹窗的实例

    layer.alert回调函数执行关闭弹窗的实例

    今天小编就为大家分享一篇layer.alert回调函数执行关闭弹窗的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现合并json对象的方法

    JS实现合并json对象的方法

    这篇文章主要介绍了JS实现合并json对象的方法,涉及javascript递归调用与json格式数据遍历的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • javascript实例--教你实现扑克牌洗牌功能

    javascript实例--教你实现扑克牌洗牌功能

    我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
    2014-05-05
  • HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题...
    2007-03-03
  • 详解如何通过JavaScript实现函数重载

    详解如何通过JavaScript实现函数重载

    这篇文章主要为大家详细介绍了如何通过JavaScript实现函数重载,文中的示例代码讲解详细,对我们学习JavaScript有一定的帮助,感兴趣的可以了解一下
    2023-01-01
  • JavaScript实现五种不同烟花特效

    JavaScript实现五种不同烟花特效

    这篇文章主要给大家带来五个好看的基于 HTML+CSS+JS 的烟花特效,文中的示例代码讲解详细,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-01-01
  • 微信小程序生成海报分享朋友圈的实现方法

    微信小程序生成海报分享朋友圈的实现方法

    利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • js字符串完全替换函数分享

    js字符串完全替换函数分享

    用JS替换字符串时。只能替换掉字符串中第一个匹配对象,有时候需要替换全部的字符,下文是具体的实现方法,大家可以参考下
    2014-12-12

最新评论