Question

我要做的是仅运行一次if语句并禁用该语句。在我的代码中，如果我连续单击按钮，if语句仍然会被渲染。那是为什么？

HTML：

<button onclick="appendMsg()">submit</button>
<div id="wrapper"></div>

使用Javascript：

function appendMsg(){

  var triggerOnceforShare = true;

  if(triggerOnceforShare){
     triggerOnceforShare = false;
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
    console.log(triggerOnceforShare);
  }

}

codepen： http://codepen.io/vincentccw/pen/uoBkI

Answer 1

你应该将你的var triggerOnceforShare = true;放在函数之外，作为全局函数，它将起作用。

var triggerOnceforShare = true;
function appendMsg(){   
  if(triggerOnceforShare){
    triggerOnceforShare = false;
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
    console.log(triggerOnceforShare);
  }
}

Answer 2

每次运行triggerOnceforShare函数时，变量appendMsg都会重新初始化 - 因此它始终设置为true。

确保它只运行一次的方法是将变量存储在闭包中：

// Using the revealing module pattern
// we create a closure using an immediately invoked function expression (IIFE)
var appendMsg = (function() {
  // We store the boolean flag in this IIFE's closure scope
  var triggerOnceforShare = true;

  // And then we return a function from our IIFE to bind to our `appendMsg` var
  return function appendMsg(){
    if(triggerOnceforShare){
      // Which changes the value of `triggerOnceForShare` in *the parent's* scope
      triggerOnceforShare = false;
      document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
    }
  }
})();

事实上，这种模式可以推广到一个装饰另一个函数的函数中：

function once(f) {
  var hasRun = false;
  return function() {
    if (hasRun) { return; }
    return f.apply(this, arguments);
  };
}

然后我们可以使用它来简化我们的代码：

var appendMsg = once(function appendMsg() {
  document.getElementById('wrapper').innerHTML+= "true<br />"
});

Answer 3

试试这个，将var triggerOnceforShare = true;从函数内部移到外面

var triggerOnceforShare = true;
function appendMsg(){   
  if(triggerOnceforShare){
     triggerOnceforShare = false;
     document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
     console.log(triggerOnceforShare);
    }
}

Answer 4

<script>
var triggerOnceforShare = true;
function appendMsg(){

  if(triggerOnceforShare){
     triggerOnceforShare = false;
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
    console.log(triggerOnceforShare);
  }

}
</script>

试试这个......

Answer 5

你必须在函数 appendMsg（）

之外声明变量

var triggerOnceforShare = true;

function appendMsg(){        

   if(triggerOnceforShare){
       triggerOnceforShare = false;
      document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
      console.log(triggerOnceforShare);
   }    
}

Answer 6

调用函数时，函数中的所有内容都会被运行，这包括triggerOnceforShare = true语句。

你可以这样做;

function appendMsg() {
    if (appendMsg.ran)
        return;
    appendMsg.ran = true;

    document.getElementById('wrapper').innerHTML += triggerOnceforShare + "<br />"
}

一旦运行就将ran状态保存到函数中，如果再次运行，则立即returns。

或者你可以做一些更高效的事情。修改您的onclick到此; onclick="appendMsg(this)"并使用此功能;

function appendMsg(button) {
    button.onclick = null;
    document.getElementById('wrapper').innerHTML += triggerOnceforShare + "<br />"
}

一旦运行，就会从按钮中删除处理程序。

使用if条件运行一次Javascript？

6 个答案: