js点击事件里面有个循环我可以点击一次执行一次循环吗

Question

let arr = [                {id:1,text:"生活不只眼前的苟且"},                {id:2,text:"还有诗"},                {id:3,text:"和远方"}                ];let items = [];$("#add").click(function(){for(var i = 0;i<arr.length;i++){    items.push(arr[i]);  }  })//这样写会直接把arr所有的数据全部加进去，希望是点击一次 添加arr中的一个id

Answer 1

  // 这里定义一个全局的index标识上次添加的id的位置

  let index = 0;

  let arr = [

    {id:1,text:"生活不只眼前的苟且"},

    {id:2,text:"还有诗"},

    {id:3,text:"和远方"}

  ];

  let arrLength = arr.length;

  let items = [];

  document.getElementById("add").onclick = function(){

    // 防止数组下标溢出

    if (index <= arrLength - 1) {

      items.push(arr[index]);

      // 添加完成之后下标后移

      index++;

    }

    console.log(items);

  }

Answer 2

可以先确定这个id,然后做一个比较

var id = ''

$("#add").click(function(){

    for(var i = 0;i<arr.length;i++){

        if (id === arr[i].id) {

            items.push(arr[i]); 

        }

    }  

})

Answer 3

闭包+立即执行函数实现：

$('#add').click(

    (function() {

        let count = 0;

        return function() {

            items.push(arr[count++]);

        };

    })()

);