javascript - 使 setInterval 对元素唯一？

标签 javascript jquery html setinterval

我一直在尝试构建一个打字动画，它在滚动时触发 View 中的链接。 jquery 选择正确的元素或正在创建的 setinterval 对象似乎存在问题，导致所有元素键入相同的内容，而不管选择的 id。我已经尝试了几种方法来使元素的 setinterval 唯一。

var typers = {};
var typeElem = $('.typer');
$.each(typeElem, function() {
  var tElem = $(this);
  var typeText = tElem.text();
  tElem.data('output', typeText);
});
var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);
  //console.log(`window height  ${window_height}`);
  // console.log(`window top  ${window_top_position}`);
  //  console.log(`window bott  ${window_bottom_position}`);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);
    // console.log(element_bottom_position);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
      //console.log('add');
    } else {
      $element.removeClass('in-view');
      //console.log('remove');
    }
  });
  var $typeTheseElements = $('a.in-view');
  $.each($typeTheseElements, function() {
    //console.log(this.length);
    var ident = $(this).attr('id');
    console.log(ident);
    if ($(`#${ident}`).data("typing")) {
      /// console.log(`already typing ${ident}`);
    } else {
      var aText = "http://";
      $(`#${ident}`).data("typing", true);
      // console.log($element.data('output'));
      srcText = $(`#${ident}`).data('output');
      // console.log(`Type: ${srcText}`);
      var counter = 0;
      typers[ident] = setInterval(function() {
        if (counter < srcText.length) {
          aText = aText + srcText.charAt(counter);
          $(`#${ident}`).text(aText);
          counter++;
        } else {
          $(`#${ident}`).data("typing", false);
          clearInterval(typers[ident]);
          //console.log('done typing')
        }
      }, 300);

      //console.log(srcText);

    }
    // console.log('type this' );
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
@keyframes siteFocus {
  0% {
    width: 25%;
  }
  25% {
    width: 50%;
  }
  50% {
    width: 75%;
  }
  100% {
    width: 100%;
  }
}


/* The element to apply the animation to */

.sites:hover {
  transition: all 3s
}

.sites {
  width: 25%;
  height: 15px;
  padding-top: 10px;
  float: left;
  text-align: center;
  transition: all 3s
}

.sitelinks {
  color: black;
  text-decoration: none;
}

.siteDescription {
  display: none;
}

.intro {
  font-size: 26px;
}

.intro-dot {
  font-weight: bold;
  font-style: normal;
}


/*These styles contain basic styles for fomatting along with our animation css*/

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background: #efefef;
  line-height: 170%;
}

strong,
b {
  font-weight: 600
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: 150%;
}

i.fa {
  color: #333;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.main-container {
  background: #fff;
  max-width: 1000px;
  margin: 25px auto 25px auto;
  position: relative;
}

.container {
  position: relative;
  padding: 25px;
}


/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
  top: 0;
}


/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 3000ms linear;
  -webkit-transition: all 3000ms linear;
  -o-transition: all 3000ms linear;
  transition: all 3000ms linear;
  -moz-transform: translate3d(-300px, 0px, 0px);
  -webkit-transform: translate3d(-300px, 0px, 0px);
  -o-transform: translate(-300px, 0px);
  -ms-transform: translate(-300px, 0px);
  transform: translate3d(-300px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.imagep.in-view {
  opacity: 1;
  color: black;
  white-space: nowrap;
  overflow: hidden;
}

.animation-element.typer.in-view {
  opacity: 1;
  color: black;
  white-space: nowrap;
  overflow: hidden;
}

.animation-element.imagep:nth-child(2) {}


/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 100%;
  margin: 1% 1% 1% 1%;
  background: #F5F5F5;
  padding: 5px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}

.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 100%;
  margin: 1% 1% 1% 1%;
}

.animation-element.slide-left.testimonial:nth-of-type(even) {
  width: 100%;
  margin: 1% 1% 1% 1%;
}

.animation-element.slide-left.testimonial .header {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .left {
  float: left;
  margin-right: 15px;
}

.animation-element.slide-left.testimonial .right {
  float: left;
}

.animation-element.slide-left.testimonial h3 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial h4 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial .content {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating {}

.animation-element.slide-left.testimonial i {
  color: #aaa;
  margin-right: 5px;
}


/*media queries for small devices*/

@media screen and (max-width: 678px) {
  /*testimonials*/
  .animation-element.slide-left.testimonial,
  .animation-element.slide-left.testimonial:nth-of-type(odd),
  .animation-element.slide-left.testimonial:nth-of-type(even) {
    width: 100%;
    margin: 0px 0px 0px 0px;
  }
  .animation-element.slide-left.testimonial .right,
  .animation-element.slide-left.testimonial .left,
  .animation-element.slide-left.testimonial .content,
  .animation-element.slide-left.testimonial .rating {
    text-align: center;
    float: none;
  }
}

.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
  margin-right: 5px;
  margin-bottom: 5px;
  display: block;
  height: 83px;
}

.imagep {
  display: block;
  position: absolute;
  top: 25px;
  left: 130px;
  width: 100%;
}

.hiddenb {
  background: rgb(255, 255, 255);
  position: absolute;
  top: 20px;
  left: 130px;
  width: 50px%;
}

.imagepspan {
  color: black;
  font: bold 20px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(255, 255, 255);
  /* fallback color */
  background: rgba(255, 255, 255, 1);
  padding: 2px;
}

.imagepspan a {
  color: black;
  font: bold 20px/45px Helvetica, Sans-Serif;
  text-decoration: none;
}

p a {
  color: black;
  text-decoration: none;
}

.spancursor {
  animation: blink 1s infinite;
}

@keyframes type {
  from {
    width: 0;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}

@keyframes blink {
  to {
    opacity: .0;
  }
}

::selection {
  background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="public/style.css">
  <script src="public/jquery.min.js" type="text/javascript"></script>
  <script src="public/animations.js" type="text/javascript"></script>

</head>

<body>
  <div class="main-container">

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test1.ca" id="a0" class="animation-element typer">test1.ca</a></span><span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test2.ca" id="a1" class="animation-element typer">test2.ca</a>
    </span><span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test3.ac" id="a2" class="animation-element typer">test3.ac</a>
    </span><span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test4" id="a3" class="animation-element typer">test4</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test5" id="a4" class="animation-element typer">test5</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test6" id="a5" class="animation-element typer">test6</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test7" id="a6" class="animation-element typer">test7</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test8" id="a7" class="animation-element typer">test8</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test9" id="a8" class="animation-element typer">test9</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test10" id="a9" class="animation-element typer">test10</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test11" id="a10" class="animation-element typer">test11</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test12" id="a11" class="animation-element typer">test12</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test13" id="a12" class="animation-element typer">test13</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test14" id="a13" class="animation-element typer">test14</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test15" id="a14" class="animation-element typer">test15</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

    <div class="animation-element slide-left testimonial">
      <div class="image">
        <image src="public/chromeBar.png" alt="" />

        <p class="animation-element imagep"><span class="imagepspan"><a href="http://test16" id="a15" class="animation-element typer">test16</a></span>
          <span class="spancursor">|</span></p>
      </div>
    </div>

  </div>
</body>
<footer>

</footer>

</html>

最佳答案

您需要在 .each() 中声明 srcText 变量，否则您将创建一个全局变量。 each.() 在调用 setInterval 函数之前遍历整个列表，因此 scrText 保留迭代中的最后一个值。

要修复，请添加 var 以在函数中声明局部变量:

      var srcText = $(`#${ident}`).data('output');

关于javascript - 使 setInterval 对元素唯一？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45270960/

上一篇：javascript - 单击禁用的 <select> 选项框时如何触发警报消息？

下一篇：javascript - 以灵活的多按钮形式显示多个预加载动画

相关文章：

javascript - 使用 JS 展开/折叠 div 常见问题解答

jquery - 什么是 $.wrap 参数 (jQuery UI)

javascript - 如何停止在特定元素上沿特定方向滚动？

html - 如何在一个CSS类中为按钮设置不同的颜色

javascript - 使用 innerText Javascript 更改标签的值

javascript - 为什么这个 Highcharts xAxis 实际最大值大于我设置的 xAxis.max？

javascript - 使用 Polymer 的点击功能发送对象

javascript - jQuery 对 Javascript 函数的请求

javascript - jQuery 中有类似 Dojo GFX 的东西吗？

javascript - 当类名相同时单击事件不起作用

©2024 IT工具网  联系我们