一度だけ実行できる関数を作成する必要があります。最初の関数以降は実行されません。私はC++とJavaから、作業を実行できる静的変数について知っていますが、これを実行するためのより洗練された方法があるかどうか知りたいですか?
25 に答える
「実行されない」とは、「複数回呼び出されても何もしない」という意味の場合、クロージャーを作成できます。
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
// do something
}
};
})();
something(); // "do something" happens
something(); // nothing happens
@Vladloffe(現在は削除されています)によるコメントへの回答:グローバル変数を使用すると、他のコードが「実行済み」フラグの値(選択した名前)をリセットする可能性があります。クロージャがあると、他のコードは、偶然または故意にそれを行う方法がありません。
ここで他の回答が指摘しているように、いくつかのライブラリ(UnderscoreやRamdaなど)には、関数を引数として受け取り、提供された関数を1回だけ呼び出す別の関数を返す小さなユーティリティ関数(通常はonce()
[*]という名前)があります。返された関数が何度も呼び出されます。返された関数は、提供された関数によって最初に返された値もキャッシュし、後続の呼び出しでそれを返します。
ただし、そのようなサードパーティのライブラリを使用していないが、(上記で提供したナンスソリューションではなく)ユーティリティ関数が必要な場合は、実装が簡単です。私が見た中で最も素晴らしいバージョンは、David Walshによって投稿されたものです:
function once(fn, context) {
var result;
return function() {
if (fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
fn = null;
私はに変更する傾向がありますfn = context = null;
。context
一度呼び出された後の参照を維持するためにクロージャが呼び出される理由はありませんfn
。
使用法:
function something() { /* do something */ }
var one_something = once(something);
one_something(); // "do something" happens
one_something(); // nothing happens
[*]ただし、 このjQueryのDrupal拡張機能など、他のライブラリには、まったく異なることを行うという名前の関数がある場合があることに注意してください。once()
再利用可能なNOOP (操作なし)機能に置き換えてください。
// this function does nothing
function noop() {};
function foo() {
foo = noop; // swap the functions
// do your thing
}
function bar() {
bar = noop; // swap the functions
// do your thing
}
呼び出されたら、空の関数をポイントします。
function myFunc(){
myFunc = function(){}; // kill it as soon as it was called
console.log('call once and never again!'); // your stuff here
};
<button onClick=myFunc()>Call myFunc()</button>
または、そのように:
var myFunc = function func(){
if( myFunc.fired ) return;
myFunc.fired = true;
console.log('called once and never again!'); // your stuff here
};
// even if referenced & "renamed"
((refToMyfunc)=>{
setInterval(refToMyfunc, 1000);
})(myFunc)
UnderscoreJsにはそれを行う関数underscorejs.org/#onceがあります
// Returns a function that will be executed at most one time, no matter how
// often you call it. Useful for lazy initialization.
_.once = function(func) {
var ran = false, memo;
return function() {
if (ran) return memo;
ran = true;
memo = func.apply(this, arguments);
func = null;
return memo;
};
};
静的変数について言えば、これはクロージャーバリアントに少し似ています。
var once = function() {
if(once.done) return;
console.log('Doing this once!');
once.done = true;
};
once(); once();
その後、必要に応じて関数をリセットできます。
once.done = false;
あなたは単に「それ自体を取り除く」機能を持つことができます
function Once(){
console.log("run");
Once = undefined;
}
Once(); // run
Once(); // Uncaught TypeError: undefined is not a function
しかし、エラーを飲み込みたくない場合は、これが最善の答えではない可能性があります。
これを行うこともできます:
function Once(){
console.log("run");
Once = function(){};
}
Once(); // run
Once(); // nothing happens
スマートポインタのように機能する必要があります。タイプAの要素がない場合は実行でき、A要素が1つ以上ある場合は、関数を実行できません。
function Conditional(){
if (!<no elements from type A>) return;
// do stuff
}
var quit = false;
function something() {
if(quit) {
return;
}
quit = true;
... other code....
}
これを試して
var fun = (function() {
var called = false;
return function() {
if (!called) {
console.log("I called");
called = true;
}
}
})()
Crockfordという名前の男から...:)
function once(func) {
return function () {
var f = func;
func = null;
return f.apply(
this,
arguments
);
};
}
で動作する再利用可能なinvalidate
関数setInterval
:
var myFunc = function (){
if (invalidate(arguments)) return;
console.log('called once and never again!'); // your stuff here
};
const invalidate = function(a) {
var fired = a.callee.fired;
a.callee.fired = true;
return fired;
}
setInterval(myFunc, 1000);
JSBinで試してみてください:https ://jsbin.com/vicipar/edit?js、console
Bunykからの回答のバリエーション
必要なときに簡単に作成できるシンプルなデコレータ
function one(func) {
return function () {
func && func.apply(this, arguments);
func = null;
}
}
使用:
var initializer= one( _ =>{
console.log('initializing')
})
initializer() // 'initializing'
initializer() // nop
initializer() // nop
これがJSFiddleの例です-http ://jsfiddle.net/6yL6t/
そしてコード:
function hashCode(str) {
var hash = 0, i, chr, len;
if (str.length == 0) return hash;
for (i = 0, len = str.length; i < len; i++) {
chr = str.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
var onceHashes = {};
function once(func) {
var unique = hashCode(func.toString().match(/function[^{]+\{([\s\S]*)\}$/)[1]);
if (!onceHashes[unique]) {
onceHashes[unique] = true;
func();
}
}
あなたができること:
for (var i=0; i<10; i++) {
once(function() {
alert(i);
});
}
そしてそれは一度だけ実行されます:)
初期設定:
var once = function( once_fn ) {
var ret, is_called;
// return new function which is our control function
// to make sure once_fn is only called once:
return function(arg1, arg2, arg3) {
if ( is_called ) return ret;
is_called = true;
// return the result from once_fn and store to so we can return it multiply times:
// you might wanna look at Function.prototype.apply:
ret = once_fn(arg1, arg2, arg3);
return ret;
};
}
Node.jsを使用している場合、またはbrowserifyでJavaScriptを記述している場合は、「1回」のnpmモジュールを検討してください。
var once = require('once')
function load (file, cb) {
cb = once(cb)
loader.load('file')
loader.once('load', cb)
loader.once('error', cb)
}
将来的に関数を再利用できるようにしたい場合は、上記のed Hoppのコードに基づいてうまく機能します(元の質問ではこの追加機能が必要ではなかったことに気づきました!):
var something = (function() {
var executed = false;
return function(value) {
// if an argument is not present then
if(arguments.length == 0) {
if (!executed) {
executed = true;
//Do stuff here only once unless reset
console.log("Hello World!");
}
else return;
} else {
// otherwise allow the function to fire again
executed = value;
return;
}
}
})();
something();//Hello World!
something();
something();
console.log("Reset"); //Reset
something(false);
something();//Hello World!
something();
something();
出力は次のようになります。
Hello World!
Reset
Hello World!
ライトを1回だけオンにする簡単な例。
function turnOnLightOnce() {
let lightOn = false;
return function () {
if (!lightOn) {
console.log("Light is not on...Turning it on for first and last time");
lightOn = true;
}
};
}
const lightOn = turnOnLightOnce();
lightOn() // Light is not on...Turning it on for first and last time
lightOn()
lightOn()
lightOn()
lightOn()
https://codesandbox.io/s/javascript-forked-ojo0i?file=/index.js
これは、JavaScriptのクロージャが原因で発生します。
アンダースコア「once」関数を使用しようとしています:
var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.
var init = function() {
console.log("logges only once");
init = false;
};
if(init) { init(); }
/* next time executing init() will cause error because now init is
-equal to false, thus typing init will return false; */
if (!window.doesThisOnce){
function myFunction() {
// do something
window.doesThisOnce = true;
};
};
Ramdaを使用している場合は、関数「once」を使用できます。
ドキュメントからの引用:
once関数(a…→b)→(a…→b)パラメータv0.1.0で追加
関数fnを受け入れ、fnの呼び出しを保護する関数を返します。これにより、返された関数が何度呼び出されても、fnは一度だけ呼び出すことができます。計算された最初の値は、後続の呼び出しで返されます。
var addOneOnce = R.once(x => x + 1);
addOneOnce(10); //=> 11
addOneOnce(addOneOnce(50)); //=> 11
できるだけシンプルにしてください
function sree(){
console.log('hey');
window.sree = _=>{};
}
あなたは結果を見ることができます
JQueryでは、メソッドone()を使用して関数を1回だけ呼び出すことができます。
let func = function() {
console.log('Calling just once!');
}
let elem = $('#example');
elem.one('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Function that can be called only once</p>
<button id="example" >JQuery one()</button>
</div>
JQueryメソッドon()を使用した実装:
let func = function(e) {
console.log('Calling just once!');
$(e.target).off(e.type, func)
}
let elem = $('#example');
elem.on('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Function that can be called only once</p>
<button id="example" >JQuery on()</button>
</div>
ネイティブJSを使用した実装:
let func = function(e) {
console.log('Calling just once!');
e.target.removeEventListener(e.type, func);
}
let elem = document.getElementById('example');
elem.addEventListener('click', func);
<div>
<p>Functions that can be called only once</p>
<button id="example" >ECMAScript addEventListener</button>
</div>
楽しみのために私の帽子をリングに投げて、メモ化の利点を追加しました
const callOnce = (fn, i=0, memo) => () => i++ ? memo : (memo = fn());
// usage
const myExpensiveFunction = () => { return console.log('joe'),5; }
const memoed = callOnce(myExpensiveFunction);
memoed(); //logs "joe", returns 5
memoed(); // returns 5
memoed(); // returns 5
...
これは、(jQueryを使用して)無限ループを防ぐのに役立ちます。
<script>
var doIt = true;
if(doIt){
// do stuff
$('body').html(String($('body').html()).replace("var doIt = true;",
"var doIt = false;"));
}
</script>
名前空間の汚染が心配な場合は、「doIt」を長いランダムな文字列に置き換えてください。
スティッキーな実行を防ぐのに役立ちます
var done = false;
function doItOnce(func){
if(!done){
done = true;
func()
}
setTimeout(function(){
done = false;
},1000)
}