Function in JavaScript that can be called only once

 https://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once

If by "won't be executed" you mean "will do nothing when called more than once", you can create a closure:

var something = (function() {
    var executed = false;
    return function() {
        if (!executed) {
            executed = true;
            // do something
        }
    };
})();

something(); // "do something" happens
something(); // nothing happens

In answer to a comment by @Vladloffe (now deleted): With a global variable, other code could reset the value of the "executed" flag (whatever name you pick for it). With a closure, other code has no way to do that, either accidentally or deliberately.

As other answers here point out, several libraries (such as Underscore and Ramda) have a little utility function (typically named once()[*]) that accepts a function as an argument and returns another function that calls the supplied function exactly once, regardless of how many times the returned function is called. The returned function also caches the value first returned by the supplied function and returns that on subsequent calls.

However, if you aren't using such a third-party library, but still want a utility function (rather than the nonce solution I offered above), it's easy enough to implement. The nicest version I've seen is this one posted by David Walsh:

function once(fn, context) { 
    var result;
    return function() { 
        if (fn) {
            result = fn.apply(context || this, arguments);
            fn = null;
        }
        return result;
    };
}

I would be inclined to change fn = null; to fn = context = null;. There's no reason for the closure to maintain a reference to context once fn has been called.

Usage:

function something() { /* do something */ }
var one_something = once(something);

one_something(); // "do something" happens
one_something(); // nothing happens

Using the OptinMonster API with Single Page Applications

 https://optinmonster.com/docs/using-the-optinmonster-api-with-single-page-applications/

OptinMonster works on almost any website, including Single Page Applications.

In this article, we’ll provide some examples for using the Events API .reset() method to work with the OptinMonster API to deeply integrate with your Single Page Application.

Before You Start

Here are some things to know before you begin:

  • Due to the advanced nature of this guide, at this time we do not provide technical support for implementing .reset() in Single Page Applications.

Examples

You would update any of the following examples’ method to use your own unique OptinMonster account ID and user ID.

The method is formatted based on your account and user id: om{accountId}_{userId} so if your account ID is 1234 and your user ID 5678 the object would be window.om5678_1234.

Vue Router
1// Using Vue Router.
2import Vue from 'vue';
3import Router from 'vue-router';
4Vue.use(Router);
5const router = new Router ({
6// Your vue router settings.
7});
8router.beforeEach((to, from, next) => {
9    if (window.om5678_1234) {
10        window.om5678_1234.reset();
11    }
12});
13export default router;
React Router V4
1// Using React Router V4
2import React from "react";
3import { withRouter } from "react-router";
4class App extends Component {
5    componentDidMount() {
6        this.unlisten = this.props.history.listen((location, action) => {
7            if (window.om5678_1234) {
8                window.om5678_1234.reset();
9            }
10        });
11    }
12    componentWillUnmount() {
13        this.unlisten();
14    }
15    render() {
16        return (
17             
18 
19<div>{/* Your routes defined here. */}</div>
20 
21 
22        );
23    }
24}
25export default withRouter(App);
React Router V3
1// Using React Router V3
2import { browserHistory } from 'react-router';
3class App extends React.component {
4    componentDidMount() {
5        this.unlisten = browserHistory.listen( location => {
6            if (window.om5678_1234) {
7                window.om5678_1234.reset();
8            }
9        });
10    }
11    componentWillUnmount() {
12        this.unlisten();
13    }
14    render() {
15        return (
16             
17 
18<div>{/* Your routes defined here. */}</div>
19 
20 
21        )
22    }
23}
EmberJS
1// Using Ember.js.
2import Route from '@ember/routing/route';
3export default Route.extend({
4    beforeModel(transition) {
5        if (window.om5678_1234) {
6            window.om5678_1234.reset();
7        }
8    }
9});
AngularJS
1// Using AngularJS.
2var myApp = angular.module('myApp', []);
3myApp.run(function($rootScope) {
4    $rootScope.$on("$locationChangeStart"function(event, next, current) {
5        if (window.om5678_1234) {
6            window.om5678_1234.reset();
7        }
8    });
9});

Troubleshooting

Where do I find my account ID and user ID?

These are readily accessible in the OptinMonster embed code.

You can find your embed code in the Publish screen of the campaign builder, then look for the data-account and data-user attributes.

OptinMonster account ID and user ID

StaticImage

  import React , { useEffect , useRef } from "react" import { StaticImage } from "gatsby-plugin-image" impor...