input的值赋给js函数的方法

Question

如何将input输入框所输入的数字赋给setInterval，或者说是setInterval如何获取到input输入框所输入的数字更改他的刷新时间。做了一个二维码，input输入控制刷新间隔时间，button按钮根据输入数字执行刷新任务，最后一步了不知道怎么搞了，求指教

Answer 1

clearInterval(timer); // 清理上次定时器，然后重新设置定时器
timer = setInterval(() => {
   //
}, document.querySelector('.input').value);

Answer 2

这其实涉及了多个方面，你需要拆开，一步一步的处理

1. 把input的输入提取并格式化成合适的数据，赋值给一个变量，假定是Ctime变量
2. 在点击button时，以变量值Ctime变量来启动setInterval，执行相应处理

从这里，我们可以找到一个基本的关系，但进一步，我们会想

1. 如果在setInterval已经启动的情况下，再改变input该怎么处理？
2. setInterval是否可以停止？

因为上述不同的进一步考虑，对实际实现是有很大影响的，会造成不同的实现结果。

这里我分成2种情况来说一下，

1. input的改变只影响后续setInterval再启动
2. input的改变会影响已经启动的setInterval重新设置

对于1，其实input的改变只需要在点击button中处理即可，这时button的点击操作用伪代码表示为:

// 前面定义有全局的setIntervalEr变量接收setInterval来方便停止。
// 要在setInterval中执行的函数 myTimer
function buttonOnClick(){
   cTimer= int( document.getElementById("input").value );
   if (setIntervalEr!=null)  clearInterval(setIntervalEr);
   if (cTimer>0) setIntervalEr=setInterval(myTimer, cTimer);
}

对于2，其实input的改变在input输入了回车(或者有改变，并且input组件失去焦点时)表示完成输入后处理:

// 有全局变量cTimer接收定义时长
// 前面定义有全局的setIntervalEr变量接收setInterval来方便停止。
// 要在setInterval中执行的函数 myTimer
function inputEnt(){
   cTimer= int( document.getElementById("input").value );
   if (setIntervalEr!=null && cTimer>0){
       clearInterval(setIntervalEr);
       setIntervalEr=setInterval(myTimer, cTimer);
   }
}
function buttonOnClick(){
   if (setIntervalEr!=null)  clearInterval(setIntervalEr);
   if (cTimer>0) setIntervalEr=setInterval(myTimer, cTimer);
}

Answer 3

去了解学习全局、变量、块作用域

方法：

• setInterval函数动态获取input标签值
• 输入框值变动，维护一个setInterval内部可访问的变量