首次运行脚本（JS）时如何修复空输出（数据）

时间：2019-04-30 19:46:42

标签： javascript

我写了一个JS脚本，每10秒运行一次通知。
该脚本可以正常工作，但是有问题。
FIRST 通知（数据）输出为空白。

var array = [["Damu Rizki Tari",793,31],["Eman Latupono",784,28],["Salsabila Kamil",954,23],["Laila Astuti",673,38],["Wakiman Martana",117,45],["Irma Sakura Agu",515,52],["Liman Pangestu",137,45],["Ismail Zulkarna",765,58],["Dalima Yuliarti",161,27],["Elvina Dewi Pad",896,42],["Dono Irwan Sima",725,26],["Ade Putra",863,7],["Tirtayasa Agus ",753,26],["Unggul Prasetyo",844,9],["Citra Zulaikha ",267,4],["Ani Rahmawati",659,3],["Parman Prasasta",582,26],["Dalimin Baktiad",512,32],["Jaka Dacin Sire",810,10],["Chelsea Padmasa",177,54],["Jasmani Rajasa",923,40],["Elvina Rahayu",784,3],["Samsul Raden Me",423,32],["Nova Wulandari ",41,33],["Uchita Restu Na",984,54],["Hamzah Wijaya",269,42],["Dadap Bagus Hut",360,7],["Febi Wijayanti",814,6],["Embuh Dasa Walu",549,39],["Aris Garda Siho",262,47]];

setInterval(function() {
  var buyer = array[Math.random() * array.length | 0];

  document.getElementById("random").innerHTML = buyer[0] + ", membeli<br><b>$" + buyer[1] + "</b> Saldo PayPal<small>" + buyer[2] + " menit lalu</small>";
  $(".custom-social-proof").stop().slideToggle('fast');
}, 8000);

$(".custom-close").click(function() {
  $(".custom-social-proof").stop().slideToggle('fast');
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
.custom-social-proof {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999999999999 !important;
  font-family: 'Open Sans', sans-serif;
}

.custom-social-proof .custom-notification {
  width: 320px;
  border: 0;
  text-align: left;
  z-index: 99999;
  box-sizing: border-box;
  font-weight: 400;
  border-radius: 6px;
  box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2);
  background-color: #fff;
  position: relative;
  cursor: pointer;
}

.custom-social-proof .custom-notification .custom-notification-container {
  display: flex !important;
  align-items: center;
  height: 80px;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
  max-height: 75px;
  width: 90px;
  overflow: hidden;
  border-radius: 6px 0 0 6px;
  object-fit: cover;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
  margin: 0;
  height: 100%;
  color: gray;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0 6px 6px 0;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 16px;
}

.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small {
  margin-top: 3px !important;
  display: block !important;
  font-size: 12px !important;
  opacity: 0.8;
}

.custom-social-proof .custom-notification .custom-close {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 12px;
  width: 12px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  transform: rotate(45deg);
  opacity: 0;
}

.custom-social-proof .custom-notification .custom-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: gray;
  position: absolute;
  left: 0;
  top: 5px;
}

.custom-social-proof .custom-notification .custom-close::after {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  background-color: gray;
  position: absolute;
  left: 5px;
  top: 0;
}

.custom-social-proof .custom-notification:hover .custom-close {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom-social-proof">
  <div class="custom-notification">
    <div class="custom-notification-container">
      <div class="custom-notification-image-wrapper">
        <img src="https://tidings.today/wp-content/uploads/2018/08/tidings-today-logo-fav.png">
      </div>
      <div class="custom-notification-content-wrapper">
        <p id="random" class="custom-notification-content"></p>
      </div>
    </div>
    <div class="custom-close"></div>
  </div>
</section>

我需要将第一个通知打印为空白

感谢您的时间

3 个答案:

答案 0 :(得分：0)

将setInterval内部的大多数逻辑移至其自己的函数中，您可以在页面加载时分别调用它们。这样可以确保初始通知不为空。

var array = [["Damu Rizki Tari",793,31],["Eman Latupono",784,28],["Salsabila Kamil",954,23],["Laila Astuti",673,38],["Wakiman Martana",117,45],["Irma Sakura Agu",515,52],["Liman Pangestu",137,45],["Ismail Zulkarna",765,58],["Dalima Yuliarti",161,27],["Elvina Dewi Pad",896,42],["Dono Irwan Sima",725,26],["Ade Putra",863,7],["Tirtayasa Agus ",753,26],["Unggul Prasetyo",844,9],["Citra Zulaikha ",267,4],["Ani Rahmawati",659,3],["Parman Prasasta",582,26],["Dalimin Baktiad",512,32],["Jaka Dacin Sire",810,10],["Chelsea Padmasa",177,54],["Jasmani Rajasa",923,40],["Elvina Rahayu",784,3],["Samsul Raden Me",423,32],["Nova Wulandari ",41,33],["Uchita Restu Na",984,54],["Hamzah Wijaya",269,42],["Dadap Bagus Hut",360,7],["Febi Wijayanti",814,6],["Embuh Dasa Walu",549,39],["Aris Garda Siho",262,47]];

function displayBuyer(){
  var buyer = array[Math.random() * array.length | 0];
  document.getElementById("random").innerHTML = buyer[0] + ", membeli<br><b>$" + buyer[1] + "</b> Saldo PayPal<small>"+buyer[2]+" menit lalu</small>";
}

setInterval(function(){
  $(".custom-social-proof").stop().slideToggle('fast');
  displayBuyer();
}, 8000);

$(".custom-close").click(function() {
  $(".custom-social-proof").stop().slideToggle('fast');
});

displayBuyer();

答案 1 :(得分：0)

如上所述，首先将AmazonS3ClientBuilder.设置为implicit val s3Client: AmazonS3 = AmazonS3ClientBuilder .standard .withCredentials(awsCredentialsProvider) .withRegion(new DefaultAwsRegionProviderChain().getRegion) .build 。

为什么它第一次启动时为空白，是因为在JS启动之前，它第一次显示时没有设置文本。

.custom-social-proof
display:none
var array = [["Damu Rizki Tari",793,31],["Eman Latupono",784,28],["Salsabila Kamil",954,23],["Laila Astuti",673,38],["Wakiman Martana",117,45],["Irma Sakura Agu",515,52],["Liman Pangestu",137,45],["Ismail Zulkarna",765,58],["Dalima Yuliarti",161,27],["Elvina Dewi Pad",896,42],["Dono Irwan Sima",725,26],["Ade Putra",863,7],["Tirtayasa Agus ",753,26],["Unggul Prasetyo",844,9],["Citra Zulaikha ",267,4],["Ani Rahmawati",659,3],["Parman Prasasta",582,26],["Dalimin Baktiad",512,32],["Jaka Dacin Sire",810,10],["Chelsea Padmasa",177,54],["Jasmani Rajasa",923,40],["Elvina Rahayu",784,3],["Samsul Raden Me",423,32],["Nova Wulandari ",41,33],["Uchita Restu Na",984,54],["Hamzah Wijaya",269,42],["Dadap Bagus Hut",360,7],["Febi Wijayanti",814,6],["Embuh Dasa Walu",549,39],["Aris Garda Siho",262,47]];

setInterval(function() {
  var buyer = array[Math.random() * array.length | 0];

  document.getElementById("random").innerHTML = buyer[0] + ", membeli<br><b>$" + buyer[1] + "</b> Saldo PayPal<small>" + buyer[2] + " menit lalu</small>";
  $(".custom-social-proof").slideToggle('fast');
}, 1000);

$(".custom-close").click(function() {
  $(".custom-social-proof").stop().slideToggle('fast');
});

答案 2 :(得分：0)

编辑：我没有意识到name实际上是在使用二进制OR来限制您的随机数，这显然有效，因为所有二进制运算都对带符号的32位int起作用。它确实有效，但是这是一个坏习惯，因为它会使您的代码难以理解。通常，除非您做的是非常底层的工作并且确切地知道您在做什么，否则我将避免执行二进制操作。

在df['ng'] = df.groupby(df.name.ne(df.name.shift(1)).cumsum()).ngroup() df[df.groupby('name').ng.transform('min') == df.ng] name value ng 0 John Foo 0 1 John Bar 0 2 John Bar 0 3 John Foo 0 4 Jane Foo 1 5 Jane Bar 1 6 Jane Bar 1 行中有一些错误。首先，Math.random（）返回一个介于0和1之间的浮点数，所以类似| 0，但是您不能将浮点数用作数组索引。您需要改用整数，例如var buyer = array[Math.random() * array.length | 0];，0.547676或0。也没有理由进行1检查，该检查什么也不做。要修复它，您需要对其进行铺垫以使其为整数。它应该是这样的：

2
相关问题
最新问题