Question

我正在研究一个显示1-20个数字的简单循环。它以500ms的间隔一一显示。我想做的是，当循环在10上时，我单击按钮，它将立即显示剩余的10个数字。

谢谢。

var duration = 500;
for(let i=0; i < 20; i++ ){
  setTimeout(function(){
     $('ul').append('<li>'+ (i+1) +'</li>')
  }, i * duration);
}

$('button').click(function(){
   duration = 0;
});

ul li{
  list-style-type: none;
  float:left;
  width: 20px;
  color: #FFF;
  text-align: center;
}
ul li:nth-child(even){
  background-color: #222;
}
ul li:nth-child(odd){
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<br>
<button>display all</button>

Answer 1

对于按钮单击事件，您可以采取稍微不同的方法，方法是在单击按钮的情况下清空并重建<ul>列表。

您还需要记住的一点是，单击按钮时需要取消超时。为此，您可以考虑存储每个超时的ID，以便在单击按钮时可以清除每个超时。

以下代码是实现此目的的一种方法，可最大程度地减少对当前代码的调整量：

    var duration = 500;

    // Declare timeout array to store timeout ids
    var timeouts = [];

    for(let i=0; i < 20; i++ ){

      // Store each timeout id, so that you can cancel them if 
      // button clicked
      timeouts[i] = setTimeout(function(){
         $('ul').append('<li>'+ (i+1) +'</li>')
      }, i * duration);

    }
    
    $('button').click(function(){
        
        // If button clicked, empty ul and repopulate it
        $('ul').empty()
    
      for(var i = 0; i < timeouts.length; i++) {

        // Clear timeout at i
        clearTimeout(timeouts[i]) 

        // Add li element for i
        $('ul').append('<li>'+ (i+1) +'</li>') 
      }
    
    
       duration = 0;
    });

ul li{
  list-style-type: none;
  float:left;
  width: 20px;
  color: #FFF;
  text-align: center;
}
ul li:nth-child(even){
  background-color: #222;
}
ul li:nth-child(odd){
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<br>
<button>display all</button>

Answer 2

一个选择是拥有一个在每个间隔上shift被调用的函数数组。单击时，清除间隔，并清除仍在数组中的其余函数的forEach，然后调用它们：

var duration = 500;
const fns = [];
for(let i=0; i < 20; i++ ){
  const fn = () => $('ul').append('<li>'+ (i+1) +'</li>');
  fns.push(fn);
}
const interval = setInterval(() => {
  const fn = fns.shift();
  if (fn) fn();
  else clearTimeout(interval);
}, duration);

$('button').click(function(){
  fns.forEach(fn => fn());
  clearTimeout(interval)
});

ul li{
  list-style-type: none;
  float:left;
  width: 20px;
  color: #FFF;
  text-align: center;
}
ul li:nth-child(even){
  background-color: #222;
}
ul li:nth-child(odd){
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<br>
<button>display all</button>

Answer 3

您可以用函数代替循环，其余的工作正常：

[1,1],[1,2],[1,3];

   router.route('/pushgroup').post(function(req, res){
   var error = req.validationErrors();
var categorystring = req.body.category;
var category = JSON.parse(categorystring); // this [1,2,3]
console.log(category);
var user_id =req.body.user_id, group_name=req.body.group_name, group_imgurl 
=req.body.group_imgurl;
if(error){ res.json({success:"error"})}else{
  db.query('select * from groups where group_name=?', [group_name], function(err, 
rows){
    if(rows.length>0){
        res.json({success:"false"});      
         }else{
            db.query('insert into 
groups(group_name,date_create,group_imgurl,user_id) values(?,NOW(),?,?)' , 
[group_name,group_imgurl,user_id],
            function(err,rows){
                if(err){res.json({success:"false"})}else{ 
                    db.query('select group_id from groups where group_name =?', 
 [group_name ], function(err, rwos, filed){
                        var aa= rwos.map(({group_id})=>group_id);   //this  [1] 
                        var b= aa[0];
                        db.query('insert into 
 group_in_category(group_id,category_id) value(?)',[b,],function(err,rows,filed){
                            if(err) throw err;
                            res.json("dssd");
                        })

var duration = 500;

function range(i, n) {
  setTimeout(function() {
    $('ul').append('<li>' + (i) + '</li>')
    if (i < n) {
      range(i + 1, n);
    }
  }, duration);
}
range(1, 20);

$('button').click(function() {
  duration = 0;
});

在点击时更改setTimeout的持续时间

3 个答案: