javascript - 每个浏览器 session 运行一次脚本，但在结束时卡住脚本

Question

我有一个正在开发的网站 here我对这个介绍很满意。但是，我需要此脚本在浏览器 session 中运行一次，然后在 session 的剩余时间内保持其最终状态。这可能吗，或者我应该重新安排一些事情。我对此很陌生，需要一些帮助!我的介绍脚本如下:

var words = ['websites', 'animation', 'branding', 'illustration'];
var i = 0;
var final = "thirdrail";
var splash = setInterval(function() {

  $("#word").hide().html(words[i++]).fadeIn(500);
  if (i == words.length + 1) {
    $("#word").html(final);
    clearInterval(splash);
    var time = setTimeout(function() {
      $(".overlay").addClass("level");
      $("#word").addClass("before");
      $(".logo").addClass("final");
      $("#static").html('<img src="symbol.svg"/>');
      $("nav").css('right', '-20px');
      $(".icon").css('right', '5%');

    }, 2000);
  }

}, 1000);

Answer 1

完整的例子，如果你需要的话

var final = "thirdrail";

function startSplash() {
	var words = ['websites', 'animation', 'branding', 'illustration'];
	var i = 0;
	var splash = setInterval(function() {

		$("#word").hide().html(words[i++]).fadeIn(500);
		if (i == words.length + 1) {
			$("#word").html(final);
			clearInterval(splash);
			var time = setTimeout(function() {
				endSplash();
				localStorage.setItem("splashed", true);
			}, 2000);
		}
	}, 1000);
}

function endSplash() {
	$("#word").html(final);
	$(".overlay").addClass("level");
	$("#word").addClass("before");
	$(".logo").addClass("final");
	$("#static").html('<img src="symbol.svg"/>');
	$("nav").css('right', '-20px');
	$(".icon").css('right', '5%');
}

if(!sessionStorage.getItem("splashed")){
	startSplash();
} else {
	endSplash();
}