input的值赋给js函数的方法

  • 8

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

回复
阅读 1k
3 个回答
✓ 已被采纳
clearInterval(timer); // 清理上次定时器,然后重新设置定时器
timer = setInterval(() => {
   //
}, document.querySelector('.input').value);

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

  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);
}

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

方法:

  • setInterval函数动态获取input标签值
  • 输入框值变动,维护一个setInterval内部可访问的变量
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏