只执行一次函数使用注意事项

最新推荐文章于 2023-06-02 21:17:23 发布
最新推荐文章于 2023-06-02 21:17:23 发布
阅读量192 收藏
点赞数
分类专栏： 案例测试 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuzi007a/article/details/120895373
版权

先来看两个例子：

例子1：

// once()函数里不加参数
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>只执行一次函数使用注意事项</title>
</head>
<body>
  <script>
    var flag = true;
    
    function animation() {
      setInterval(function() {
        console.log(111111);
      }, 2500)
    }
    function getConsole() {
      setInterval(function() {
        console.log('flag---333: ', flag);
        once(flag);
        console.log('flag---444: ', flag);
      }, 5000)
    }
    getConsole();

    // 只执行一次函数
    function once() {
      console.log('flag---111: ', flag);
      if(flag) {
        animation();
        flag = false;
      }
      console.log('flag--222: ', flag);
    }
  </script>
</body>
</html>

例子2：

// once函数里加上flag参数
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>只执行一次函数使用注意事项</title>
</head>
<body>
  <script>
    var flag = true;
    
    function animation() {
      setInterval(function() {
        console.log(111111);
      }, 2500)
    }
    function getConsole() {
      setInterval(function() {
        console.log('flag---333: ', flag);
        once(flag);
        console.log('flag---444: ', flag);
      }, 5000)
    }
    getConsole();

    // once函数 
    function once(flag) {
      console.log('flag---111: ', flag);
      if(flag) {
        animation();
        flag = false;
      }
      console.log('flag--222: ', flag);
    }
  </script>
</body>
</html>

输出的区别：

例子1 会稳定的执行，每隔2500ms执行一次输出。

例子2会执行的越来越快，单次打印次数越来越多。

区别的原因：

个人理解：

例子1中，once函数不带参数，flag值取决于全局作用域的flag 。 当全局作用域的flag为false时，once函数中的内容就不会执行。

例子2中，once函数带有flag参数， flag值取决于getConsole函数中的定时器里回调函数内的局部作用域的flag值，这里的flag值总是为true，所以once函数的内容会一直执行，叠加执行。造成定时器执行混乱。

所以，once函数的使用，需要注意，不需要带参数。这样才是真正的只执行一次的函数。

另外，只执行一次函数还有很多别的写法，比如：

var once = function() {
      fn(); // 要执行的内容
      once = null
    }
只执行一次的函数
不二喵老师
09-15 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>只执行一次的程序&lt
只执行一次函数
欣欣博客
11-29 833
只执行一次函数 当实现支付，新增，保存等业务功能时，想要实现无论用户怎们点，我就执行一次的需求，那么我们就利用高阶函数的特性吧—函数作为返回值来实现吧。 上代码 function once (fn){ let done = false; return function(){ if(!done){ dont= true; fn.apply(this,arguments) } } } let pay = o
仅执行一次函数
lio-zero 的博客
05-26 472
仅执行一次函数的话，使用类似 Lodash 库的 _.once(func) 方法是最简单的。 但如果你不想使用库，想要自己实现一个简单的话，可以利用闭包： const once = (fn) => { let result return function () { if (fn) { result = func.apply(this, arguments) ...
如何让函数执行一次（JavaScript）
m0_37922443的博客
11-05 639
将函数写为函数表达式 var func = function () { console.log("函数func......"); } func(); func(); 在函数体的最后加一句执行一次的语句 var func = function () { console.log("函数func......"); func = function () { //这里可以写你想让函数体最后执行的内容 }; } func(); func(); 可以在执行一次的语句中加一个输.
如何让函数只执行一次
descire
07-06 6974
一、前言  实现函数只执行一次的核心思想非常的简单：「通过记录是否被执行的状态，来决定函数是否需要被调用」。functionstart(){ console.log('in...
基于JavaScript实现一定时间后去执行一个函数
10-23
// 每5秒执行一次showTips函数 setInterval(showTips, 5000); ``` 在上述示例中，`showTips`函数会每隔5秒钟被调用一次，直到使用`clearInterval()`函数停止定时器。 ### 停止定时器 在JavaScript中，可以通过`...
解决父组件将子组件作为弹窗调用只执行一次created的问题
10-15
然而，在这种情况下，可能会遇到一个问题：子组件的`created`生命周期钩子函数只会被执行一次，当第一次加载子组件时。这可能导致在多次打开和关闭弹窗时，子组件的状态无法正确更新或初始化。 1. **问题原因**： ...
js 弹出框只弹一次(二次修改之后的)
10-26
4. 使用JavaScript和Cookie实现弹出框只弹一次的步骤详解： - 首先，需要在页面加载完成后执行一段JavaScript代码。这段代码会检查cookie中是否已经存在特定的键值对，即检查用户是否已经访问过页面。 - 如果不...
JavaScript函数定义的常见注意事项小结
10-25
这种方式可以动态地创建函数，但性能较低，因为每次执行函数时，函数体都会被解析一次。此外，由Function构造函数创建的函数不会继承当前声明位置的作用域，它默认只会拥有全局作用域。这会导致变量作用域的问题，...
javascript function(函数类型)使用与注意事项小结
10-16
4. **使用注意事项**： - 当在函数内部改变函数名并需要递归调用时，使用`arguments.callee`可以避免直接引用函数名，使代码更灵活。 - `this`的值取决于函数被调用的方式。在函数表达式或方法中，`this`的值可能...
js中让函数只执行一次
最新发布
业余前端的职业经历
06-02 1896
在做项目的时候 经常会碰见一些 只允许我们请求一次的情况，当我们来回切页面 或者 切换tab的时候 第一次切换 可能需要我们请求数据。今天要讲的就是另一种思路了 让函数在当前情况下 只能执行一次，这个其实还比较简单 我们可以利用闭包的知识来处理。但是当切换过之后 就不需要再次请求数据了 以往我们的做法 可能判断这个页面有无数据 或者是看是否是第一次点击。这里还要注意的是 如果你的组件被卸载的话 还是最好 注意清理掉引用。查看打印的效果 会发现 只是打印了一次 hello world。
让js中的函数只有一次有效调用的三种常用方法
weixin_33971130的博客
09-10 1788
　　如何让js中的函数只被执行一次？我们有时候会有这种需求，即让一个函数只执行一次，第二次调用不会返回任何有价值的值，也不会报错。下面将通过三个小demo展示使用的方法，当做个人笔记。 1.通过闭包来实现。 &lt;script&gt; window.onload = function () { function once(fn) { ...
js一次性函数【只执行一次】
热门推荐
weixin_43837268的博客
08-07 1万+
在函数体里覆写当前函数，那么可以创建一个一次性的函数，重新赋值之前的代码相当于只运行了一次，适用于运行一些只需要执行一次的初始化代码 var sca = function() { console.log('msg') sca = function() { console.log('foo') } } sca() // msg sca()...
如何实现每执行一次函数，结果都会自增1
qq_25461519的博客
08-07 8849
function f(){ var cnt=0; return function(){ return ++cnt;} } var fa=f();//将函数f的的返回值给变量fn console.log(fa());//1 console.log(fa());//2 console.log(fa());//3 函数的返回值是函数（对象的引用），这里将其赋值给变量fn。在调用fn时，其输出结果每次都...
6.3每隔一段时间就调用一次函数或代码串
P_ning的博客
07-12 1468
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script type="text/javascript"> window.setInterval("al...
addEventListener只执行一次即销毁(已兼容)
sqfbeijing的专栏
10-12 7900
/** *只执行一次函数 *兼容各种浏览器 **/ var obj = document.querySelector("button"); handler = function(){ alert(this.tagName); if (obj.removeEventListener){ obj.removeEventListener("cl
html行为只触发一次,如何使用Javascript的addEventListener（）来覆盖HTML窗体的默认提交（）行为...
weixin_33850918的博客
06-28 364
如何使用addEventListener()为HTML窗体的Submit按钮分配处理程序，类似于按钮的onclick属性触发表单的默认submit()行为？如何使用Javascript的addEventListener()来覆盖HTML窗体的默认提交()行为我毫不费力地给“提交”按钮的'onclick'属性分配一个自定义函数。自定义函数执行各种步骤，然后创建一个Ajax请求对象并使用它将这些数据发...
C++内联函数使用注意事项
"谭浩强C++教程中关于内联函数的使用注意事项" 内联函数是C++编程中一个重要的优化手段，它旨在提高程序的执行效率。以下是使用内联函数时需要注意的几个关键点： 1. **内联函数的适用范围**：一般情况下，如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值