javascript - 页面加载后运行功能但不刷新

Question

我有一个 jquery 函数，我只想在第一次加载页面时运行，不会在刷新后运行。

代码如下:

$(window).on("load",function() {
    $("#logo-black").typed({
        strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
        typeSpeed: 70,
        backSpeed: 100,
    callback: function() {
        $(".typed-cursor").css("display", "none"),
        setTimeout(function(){
            $('.main-load').toggleClass('main-load-active'),
            $('.nav-text').toggleClass('nav-text-active');
        },400),
        $('.nav-reveal').toggleClass('nav-reveal-active');
        }
    });
});

一些注意事项:-我正在使用 barba.js , 因此通过 AJAX 添加/删除内容。

为我的元素初​​始化 barba.js 的代码:

initFullpagePlugin();

function initFullpagePlugin (parentElement) {
var element;

element = parentElement ? $('#fullpage', parentElement) : 
$('#fullpage');

if (element.length) {

  // Destroys old fullPage.js object in memory,
  // removes elements from DOM
  if ($.fn.fullpage.destroy) {
    $.fn.fullpage.destroy('all');
  }
  element.fullpage({
    //Scrolling
    autoScrolling:false,
    scrollingSpeed: 2500,
    easing: 'swing',
    fitToSection: false
  });
}
}

document.addEventListener("DOMContentLoaded", function() {
if (!('webkitClipPath' in document.body.style)) {
alert('Sorry, this demo is available just with webkitClipPath. Try with 
Chrome/Safari.');
}

Barba.Pjax.init();
Barba.Prefetch.init();


var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
 * This function is automatically called as soon the Transition starts
 * this.newContainerLoading is a Promise for the loading of the new 
container
 * (Barba.js also comes with an handy Promise polyfill!)
 */

// As soon the loading is finished and the old page is faded out, let's 
fade the new page
Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
},

fadeOut: function() {
/**
 * this.oldContainer is the HTMLElement of the old Container
 */

return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {
/**
 * this.newContainer is the HTMLElement of the new Container
 * At this stage newContainer is on the DOM (inside our #barba-
container and with visibility: hidden)
 * Please note, newContainer is available just after 
newContainerLoading is resolved!
 */
document.body.scrollTop = 0;
var _this = this;
var $el = $(this.newContainer);

$(this.oldContainer).hide();

$el.css({
  visibility : 'visible',
  opacity : 0
});

initFullpagePlugin($el);

$el.animate({ opacity: 1 }, 400, function() {
  /**
   * Do not forget to call .done() as soon your transition is finished!
   * .done() will automatically remove from the DOM the old Container
   */
  _this.done();
});
}
});

/**
* Next step, you have to tell Barba to use the new Transition
*/

Barba.Pjax.getTransition = function() {
/**
 * Here you can use your own logic!
 * For example you can use different Transition based on the current 
 page or link...
 */

 return FadeTransition;
 };
});

$('.no-click').on("click", function(e) {
e.preventDefault();
});

例如，this design studio有一个动画在您第一次加载主页时运行，但在刷新后不。 (注意:这似乎只适用于移动版本，但这是我想要实现的。我正在制作动画的元素出现在每个页面上，所以确保它只在第一次加载时触发并且只在索引上触发。 html 是我正在拍摄的东西)

感谢任何帮助/建议/建设性批评!

Answer 1

在客户端执行的代码在加载之间是无状态的。如果你想记住从页面加载到页面加载的状态，你可以:

• 在后端跟踪 session 。
• 在客户的浏览器中使用 cookies/本地存储。