Question

我有一个名称列表，这些名称会不断循环并呈现到h1标签#randomName中。当按下#pickName按钮时，将从名称列表中选择一个随机名称（然后将其删除）。

出于我要执行的操作的目的，这很好，但是我最想做的是单击#pickName链接时，请获取正在循环播放的名称列表屏幕上缓慢放慢速度（例如3秒），然后选择其中一个名称（并在警报中使用该名称）。

const names = Array('Craig O Mahony', 'Nick Farmer', 'Stuart Lister', 'Lee Rogers', 'Mick O Connor', 'Paul Alexander', 'Robin Allison', 'Neil Bellion', 'Tom / Tim / Mitch', 'Steve Casey', 'Ian Condley', 'Ken Dovey', 'Tony Doyle', 'Dave Field', 'James Field', 'Steve Fuller', 'Jim Harrison', 'Ray Harrison', 'Mick Hennessey', 'John Hodges', 'Shaun Hooper', 'Phil Large', 'Steve Lowe', 'Nevin McDermott', 'Tony McDonnell', 'Steve Nye', 'Paul Read', 'Wayne Rogers', 'Pete Sears', 'Pete Smith', 'Dave Wrafter', 'Rob Wyatt', );

const h1$ = $('#randomName');
var currentMatch = "match";
var counter = 1;
let idx = 0;

setInterval(() => {
  h1$.text(names[idx++ % names.length]);
}, 100);

$("#pickName").on('click', function() {
  const name = names[Math.floor(Math.random() * names.length)];

  alert(name);

  names.splice($.inArray(name, names), 1);
  //$('#' + name).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-default btn-lg" id="pickName">Draw Player</a>

<h1 style="font-size:4em;padding-top:15px" id="randomName"></h1>

https://jsfiddle.net/nf1eL56x/

Answer 1

您可以通过将slow = 100和time < 1000更改为所需的值来调整此效果，甚至可以在slow内操纵display

const names = Array('Craig O Mahony', 'Nick Farmer', 'Stuart Lister', 'Lee Rogers', 'Mick O Connor', 'Paul Alexander', 'Robin Allison', 'Neil Bellion', 'Tom / Tim / Mitch', 'Steve Casey', 'Ian Condley', 'Ken Dovey', 'Tony Doyle', 'Dave Field', 'James Field', 'Steve Fuller', 'Jim Harrison', 'Ray Harrison', 'Mick Hennessey', 'John Hodges', 'Shaun Hooper', 'Phil Large', 'Steve Lowe', 'Nevin McDermott', 'Tony McDonnell', 'Steve Nye', 'Paul Read', 'Wayne Rogers', 'Pete Sears', 'Pete Smith', 'Dave Wrafter', 'Rob Wyatt', );

const h1$ = $('#randomName');
var currentMatch = "match";
var counter = 1;
var time = 100;
let idx = 0;
var slow = 0;


$("#pickName").on('click', function() {
  slow = 25;
});

function display() {
  if(time < 500) {
    h1$.text(names[idx++ % names.length]);
    slow *= 2;
    time += slow;
    setTimeout(display, time);
  } else {
     const name = h1$.text();

    alert(name);
  }
}

display();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-default btn-lg" id="pickName">Draw Player</a>

<h1 style="font-size:4em;padding-top:15px" id="randomName"></h1>

Answer 2

要实现此目的，您可以清除单击按钮的时间间隔，然后递归创建一个新的超时，该超时的长度最长为3秒，然后最终选择显示在h1结尾的名称。在那个时期，像这样：

const names = Array('Craig O Mahony', 'Nick Farmer', 'Stuart Lister', 'Lee Rogers', 'Mick O Connor', 'Paul Alexander', 'Robin Allison', 'Neil Bellion', 'Tom / Tim / Mitch', 'Steve Casey', 'Ian Condley', 'Ken Dovey', 'Tony Doyle', 'Dave Field', 'James Field', 'Steve Fuller', 'Jim Harrison', 'Ray Harrison', 'Mick Hennessey', 'John Hodges', 'Shaun Hooper', 'Phil Large', 'Steve Lowe', 'Nevin McDermott', 'Tony McDonnell', 'Steve Nye', 'Paul Read', 'Wayne Rogers', 'Pete Sears', 'Pete Smith', 'Dave Wrafter', 'Rob Wyatt', );

const $h1 = $('#randomName');
let idx = 0;
let backoffMs = 75;

var interval = setInterval(() => {
  $h1.text(names[idx++ % names.length]);
}, 100);

$("#pickName").on('click', function() {
  $(this).off();
  clearInterval(interval);
  reduceInterval(new Date(), 100);
});

function reduceInterval(start, delay) {
  setTimeout(() => {
    $h1.text(names[idx++ % names.length]);
    var dif = start.getTime() - new Date().getTime();
    var secs = Math.abs(dif / 1000);
    if (secs < 3) {
      reduceInterval(start, delay + backoffMs);
    } else {
      getName();
    }
  }, delay + backoffMs);
}

function getName() {
  console.log($h1.text());
}

h1 {
  font-size: 4em;
  padding-top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-default btn-lg" id="pickName">Draw Player</a>

<h1 id="randomName"></h1>

我还建议现在随机显示显示的数组索引，这显然是相同名称的顺序。

Answer 3

这是一个通用解决方案，它使用setDeceleratingInterval和setTimeout来定义setInterval：

const names = ['Craig O Mahony','Nick Farmer','Stuart Lister','Lee Rogers','Mick O Connor','Paul Alexander','Robin Allison','Neil Bellion','Tom / Tim / Mitch','Steve Casey','Ian Condley','Ken Dovey','Tony Doyle','Dave Field','James Field','Steve Fuller','Jim Harrison','Ray Harrison','Mick Hennessey','John Hodges','Shaun Hooper','Phil Large','Steve Lowe','Nevin McDermott','Tony McDonnell','Steve Nye','Paul Read','Wayne Rogers','Pete Sears','Pete Smith','Dave Wrafter','Rob Wyatt'];

const h1$ = $('#randomName');
let idx = 0;

const randomizeH1 = () => h1$.text(names[++idx % names.length]);

let timer = setInterval(randomizeH1, 100);

const showName = () => {
  const name = names[idx % names.length];
  alert(name);
  names.splice(idx, 1);
  timer = setInterval(randomizeH1, 100);
};

function setDeceleratingInterval(cb, cb2, dtInit, factor, total) {
  let remaining = total;
  let dt = dtInit;

  const internalTimer = () => {
    remaining -= dt;
    dt *= factor;
    if (remaining >= 0) {
      setTimeout(internalTimer, dt);
      cb();
    } else {
      cb2();
    }
  };
  internalTimer();
}

$("#pickName").on('click', () => {
  clearInterval(timer);
  setDeceleratingInterval(randomizeH1, showName, 100, 1.1, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<h1 id="randomName"></h1>

<a class="btn btn-default btn-lg" id="pickName">Draw Player</a>

慢慢停止随机化

3 个答案: