javascript - 关于函数return的值的问题

Question

function arrchange(arr){
    var btn = document.getElementById("button");
    btn.onclick = function(){
        arr = [1,2,3];
    }
    return arr;
}

function runCode(){
    var arr = [];
    var myArr = arrchange(arr);
    console.log(myArr);
}

runCode();

console.log显示空数组[]。
我想实现一个效果：
把一个空数组arr传入arrchange()函数；
再将arrchange(arr)赋值给一个变量myArr;
btn.onclick的时候，arrchange(arr)对arr进行处理，返回新的arr。
不然就不处理，返回原有的arr。
--
当然实际应用中arr会动态创建，所以没办法直接赋值，只能抽象化。
该怎么写呢？
其实问题就是怎么把函数当成一个值来返回，但是要再其中添加一个click功能，也许用闭包可以解决？

Answer 1

我改了一些代码，可以看到按钮点击后myArr的值改变了

var logger = document.getElementById("log");
function arrchange(arr){
    var btn = document.getElementById("button");
    btn.onclick = function(){
        arr.push(1);
        arr.push(2);
        arr.push(3);
        logger.value = "button clicked "+arr+"\n"+logger.value;
    }
    return arr;
}

function runCode(){
    var arr = [];
    var myArr = arrchange(arr);
    setInterval(function(){
        logger.value=myArr.toString()+"\n"+logger.value;
    }, 2000);
}

runCode();

<button id="button">
click me to set array
</button>
<textarea id="log"></textarea>

这个需求很奇怪，如果描述清楚一些的话应该会有更好的思路，而不是像现在这样的解决方法。
我猜，如果你是想那个arrchange方法中断当前代码，而直到按钮点击后再继续运行后续的话，可以考虑Promise。

Answer 2

window.onload = function() {
    var arr = [], // 声明空数组 arr
        btn = document.getElementById("button"); // 获取 DOM 对象
    
    console.log(arr); // 打印空数组
     
    btn.onclick = function() { // 为按钮的点击绑定函数
        arr = [1,2,3,4,5];
        console.log(arr);
    }
}

Answer 3

btn.onclick的时候，arrchange(arr)对arr进行处理，返回新的arr。

建议题主给btn增加一个标志位，用属性或者data-*都行（如果用jq的话data会更方便，原生无所谓），btn.onclick的任务就是将标志位置为true或1，另外注册事件回调这段要提前运行，最好写到window.onload里（因为是注册事件回调，回调在事件发生的时候才会运行，你不能等事件发生的时候现注册吧）。然后arrchange()的任务就是，用if检查标志位，如果是true或1就给arr赋值，最后再return arr应该就可以了。

代码就不写了，手机不方便∠( ᐛ 」∠)_

Answer 4

async function arr(){

var btn = document.getElementById("button");
var arr = [];
await btn.onclick = function(){
    arr = [1,2,3,4,5];
}
return arr;

}