Question

我正在尝试修改此代码，以便单击按钮即可更改间隔时间，但我失败了。可以肯定的是，解决方案非常简单。感谢任何帮助。谢谢！

// define quotes array
var quotes = [
  "AAAA",
  "BBBB",
  "CCCC"
];

// initialise current quote index
var quoteIndex = 0;
// get interval time
var interval = document.getElementById("interval").value;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  setInterval(quoteTimer, interval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="interval" id="interval" value="" placeholder="Time" />
<input type="submit" name="button" id="button" value="Run" />
<div class="container">
  <h1></h1>
</div>

Answer 1

我们正在将这段代码添加到您的代码中：

// Handle the button click to stop the current setInterval and to launch a new one
$('#button').click(() => {
  clearInterval(intervalDescriptor);

  intervalDescriptor = setInterval(quoteTimer, parseInt($('#interval').val(), 10));
});

// define quotes array
const quotes = [
  "AAAA",
  "BBBB",
  "CCCC"
];

// initialise current quote index
let quoteIndex = 0;

// get interval time
const interval = document.getElementById("interval").value;

// set target element
const $target = $('.container').find('h1');

// create timer function
quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

let intervalDescriptor = false;

// Handle the button click to stop the current setInterval and to launch a new one
$('#button').click(() => {
  clearInterval(intervalDescriptor);

  intervalDescriptor = setInterval(quoteTimer, parseInt($('#interval').val(), 10));
});

// fire it up..!
$(document).ready(function() {
  intervalDescriptor = setInterval(quoteTimer, interval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="interval" value="" placeholder="Time" />
<input type="button" id="button" value="Run" />
<div class="container">
  <h1></h1>
</div>

Answer 2

@Esko表示将click事件附加到button，因此在单击按钮事件时将触发text值。检查下面的代码。

var intervalID;    

// fire it up..!
$(document).ready(function() {
  $('#button').click(function(){
        var interval = document.getElementById("interval").value;
        clearTimeout(intervalID);
        intervalID = setInterval(quoteTimer, interval);
  });
});

Answer 3

更新了您的jsfiddle

只需停止旧计时器并以新间隔启动新计时器

更改

 $("#button").on("click", function() {
     let v = parseInt($("#interval").val());
     clearTimeout(intervalval);
     intervalval = setInterval(quoteTimer, v);
  })

Answer 4

您可以使用clearInterval清除它，并以间隔重新设置。

var intervalId;

$(function(){

intervalId = setInterval(quoteTimer, interval);

});

$("button").click(function(){

if (intervalId) clearInterval(intervalId);

intervalId = setInterval(quoteTimer, interval);

});

Answer 5

var quotes = [
  "AAAA",
  "BBBB",
  "CCCC"
];

// initialise current quote index
var quoteIndex = 0;
// get interval time
var interval = document.getElementById("interval").value;

$('#button').click(function(){
  var intervl=$('#interval').val();
  intervl=intervl+"000";
  setInterval(quoteTimer, intervl);
})
// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  //setInterval(quoteTimer, interval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="interval" id="interval" value="" placeholder="Time in seconds" />
<input type="submit" name="button" id="button" value="Run" />
<div class="container">
  <h1></h1>
</div>

Answer 6

添加按钮单击事件并将其值设置为setInterval函数。

var quotes = [
  "AAAA",
  "BBBB",
  "CCCC"
];
$('#button').click(function(){
  var quoteIndex = 0;

  var interval = document.getElementById("interval").value;
  console.log(interval);

  var $target = $('.container').find('h1');
  setInterval(function(){
    $target.fadeIn().text(quotes[quoteIndex]);
    // increment the current index, or reset to 0 if on the last quote
    quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
  }, interval*1000);

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" name="interval" id="interval" value="" placeholder="Time" />
<input type="submit" name="button" id="button" value="Run" />
<div class="container">
  <h1></h1>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</div>
</body>
</html>

Answer 7

应该是这样：

        // fire it up..!   
    $("#button").click(function() {
    // define quotes array
        var quotes = [
          "AAAA",
          "BBBB",
          "CCCC"
        ];

        // initialise current quote index
        var quoteIndex = 0;
        // get interval time
        var interval = document.getElementById("interval").value;

        // set target element
        var $target = $('.container').find('h1');

        // create timer function
        var quoteTimer = function() {
          // set target text to current quote
          $target.fadeIn().text(quotes[quoteIndex]);
          // increment the current index, or reset to 0 if on the last quote
          quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
        }
      setInterval(quoteTimer, interval);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
   </script>
    <input type="text" name="interval" id="interval" value="" placeholder="Time" />
    <input type="submit" name="button" id="button" value="Run" />
    <div class="container">
      <h1></h1>
    </div>

请记住，您也想取消上一个计时器，并在单击时启动另一个计时器。我没有将该部分添加到代码中。

单击按钮更改间隔时间Javascript

7 个答案: