函数调用在事件侦听器中不起作用答案

【问题标题】：Function calls not working in Event listeners函数调用在事件侦听器中不起作用
【发布时间】：2020-08-08 14:56:04
【问题描述】：

我不知道为什么这段代码不起作用，也没有抛出任何错误。

function rotateArray(arr){
    return function(){
        var newMod = [];
        for(let i = 0; i<arr.length; i++){
            if(i===0){
                newMod[i] = arr[arr.length - 1];
            }else{
                newMod[i] = arr[i-1];   
            }
        }
        
        return arr = newMod;
    }
}
var btns = {
      btn1: 1,
      btn2: 2,
      btn3: 3,
      btn6: 6,
      btn9: 9,
      btn8: 8,
      btn7: 7,
      btn4: 4,
 }

var rotfunc = rotateArray([1,2,3,6,9,8,7,4]);

document.getElementById('btn5').addEventListener('click',() => {
  let rot = rotfunc()
  for(let i in btns){
      btns[i] = rot.shift();
  }
  for(let i in btns){
      document.getElementById(i).innerHTML = btns[i];  
  }
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Buttons Grid</title>
        <style type="text/css">
            .buttonContainer {
                width: 75%;
            }
            .buttonContainer > .buttonClass {
                    width: 30%;
                    height: 48px;
                    font-size: 24px;
            }
        </style>
    </head>
    <body>
        <div class = "buttonContainer" id = "btns">
            <button id = "btn1" class = "buttonClass">1</button>        
            <button id = "btn2" class = "buttonClass">2</button>
            <button id = "btn3" class = "buttonClass">3</button>
            <button id = "btn4" class = "buttonClass">4</button>        
            <button id = "btn5" class = "buttonClass">5</button>
            <button id = "btn6" class = "buttonClass">6</button>
            <button id = "btn7" class = "buttonClass">7</button>        
            <button id = "btn8" class = "buttonClass">8</button>
            <button id = "btn9" class = "buttonClass">9</button>
        </div>
        <script src="script.js" type="text/javascript"></script>
    </body>
</html>

单击按钮 5 时，我试图顺时针旋转数字的外圈。但它只发生一次，然后我失去了我的“腐烂”数组中的所有值。也许我错过了一些东西。有人可以帮忙吗？

【问题讨论】：

标签： javascript html dom frontend dom-events

【解决方案1】：

当您调用rot.shift() 时，您正在修改保存在rotfunc 闭包中的数组。所以下次调用rotfunc()时，数组是空的。

在修改数组之前，使用slice() 方法复制数组。

function rotateArray(arr){
    return function(){
        var newMod = [];
        for(let i = 0; i<arr.length; i++){
            if(i===0){
                newMod[i] = arr[arr.length - 1];
            }else{
                newMod[i] = arr[i-1];   
            }
        }
        
        return arr = newMod;
    }
}
var btns = {
      btn1: 1,
      btn2: 2,
      btn3: 3,
      btn6: 6,
      btn9: 9,
      btn8: 8,
      btn7: 7,
      btn4: 4,
 }

var rotfunc = rotateArray([1,2,3,6,9,8,7,4]);

document.getElementById('btn5').addEventListener('click',() => {
  let rot = rotfunc().slice()
  let rot_index = 0;
  for(let i in btns){
      btns[i] = rot.shift();
  }
  for(let i in btns){
      document.getElementById(i).innerHTML = btns[i];  
  }
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Buttons Grid</title>
        <style type="text/css">
            .buttonContainer {
                width: 75%;
            }
            .buttonContainer > .buttonClass {
                    width: 30%;
                    height: 48px;
                    font-size: 24px;
            }
        </style>
    </head>
    <body>
        <div class = "buttonContainer" id = "btns">
            <button id = "btn1" class = "buttonClass">1</button>        
            <button id = "btn2" class = "buttonClass">2</button>
            <button id = "btn3" class = "buttonClass">3</button>
            <button id = "btn4" class = "buttonClass">4</button>        
            <button id = "btn5" class = "buttonClass">5</button>
            <button id = "btn6" class = "buttonClass">6</button>
            <button id = "btn7" class = "buttonClass">7</button>        
            <button id = "btn8" class = "buttonClass">8</button>
            <button id = "btn9" class = "buttonClass">9</button>
        </div>
        <script src="script.js" type="text/javascript"></script>
    </body>
</html>

【讨论】：

感谢@Barmar 抽出宝贵时间。甚至没有想到这是同一个数组引用。