如何使函数重复用户在下拉列表中选择的次数

Posted 2023-05-09

【中文标题】如何使函数重复用户在下拉列表中选择的次数

【英文标题】：How to make function repeat x amount of times that user chose in the dropdown

【发布时间】：2021-11-05 16:19:21

【问题描述】：

我遇到了一个简单的任务，即根据用户选择的数字使函数多次运行。我有大约 1000 行带有嵌套函数的 javascript 代码，所以我不能真正修改很多，但这是我认为它的工作原理的简化版本：

function getScales() 
  getOrderData()
 
getOrderdata()  

$(document).ready(function () 
  $("#continue").click(function () 
   getScales()
  
);

据我了解，getScales 函数测量用户放在秤上的包裹的重量，然后 getOrderData 在弹出窗口中填写此信息。同一个文件中还有一些jQuery代码，我认为它会检查权重是否不为0，然后显示按钮“继续”。

无论如何，我需要将下拉菜单添加到 getOrderData 功能（它需要在弹出窗口中），例如您需要缩放多少项目。如果用户选择 1，则代码需要立即运行。如果用户选择例如 3，那么我需要循环代码运行 3 次。第一次在此循环中，代码将与现在完全相同，或者就像您在下拉列表中选择 1 一样。第二次和第三次它必须跳过 getOrderData 并只执行用户单击 “继续” 后发生的部分，因为用户不需要再看到弹出窗口了。这是我到目前为止所做的，但我被卡住了，无法弄清楚如何让这个东西工作的逻辑：

    function getScales() 
      if(dropdownIndex == 0) //if user choose 1 then the process doesn't change
        getOrderData()
       else 
      repeatTimes(times); //I'm not sure if I need to create for loop or if I can pass the value from the dropdown as a parameter "times" somehow
      
     


getOrderdata()  

var select = document.getElementById("numOfPieces"); //selecting html element and adding  dropdown options with JS
var options = ["1", "2", "3", "4", "5"]; // I chose to do it this way so I could select dropdown options based on their array index
  
  for(var i = 0; i < options.length; i++) 
      var opt = options[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
  

  let times = select.options[select.selectedIndex].value; //This is how I store the selected dropdown option in the variable 
 


    $(document).ready(function() 
      $("#continue").click(function repeatTimes() 
        getScales()
      
    );

【问题讨论】：

getScales() 在哪里执行？

@RoMilton 哦，在 $("#continue").click(function () 里面，我会编辑问题 rn

那里看起来有一些循环逻辑：继续按钮执行一个函数repeatTimes()，它执行getScales()，它再次执行repeatTimes()。你确定这是你想做的吗？

@RoMilton 我不太确定，我只是将函数命名为 repeatTimes，因为我希望这样我可以传递用户在下拉列表中选择的任何索引，而且如果我需要跳过 getOrderData用户选择的数字超过 1

你考虑过递归吗？

【参考方案1】：

如果您想要以下内容：

用户从选择列表中选择一个数字，例如3 用户点击按钮继续 某些函数执行了 3 次。

这很简单，可以通过Array.from() 和forEach() 完成：

$(document).ready(function() 
  $("#continue").click(function()
    const times = parseInt(select.options[select.selectedIndex].value, 10);
    Array.from( length: times ).forEach(function(_, i)
      // execute some function
      someFunction(i);
    );
  );
);

这是对您问题的快速回答。不幸的是，我无法帮助您完成整个流程。我了解您需要在单击 Continue 后显示各种屏幕，但我需要更深入地了解您的代码库以帮助解决此问题。如果您需要查看您的代码设计，您可以在Code Review 上发布更多代码。祝你好运。