关于js的setInterval函数对数据库进行刷新，怎么值不变呢

Posted 2023-05-09

setInterval(function()

var value1 = <?php echo db_value()?>;
var x = (new Date()).getTime(), // current time
y = value1;
series.addPoint([x, <?php echo db_value()?>], true, true);
alert(value1);
, 1000);

db_value()的代码是：
<?php
function db_value()

include_once('connect.php');
$res = mysql_query("select value from date_data where id = (select max(id) from date_data)");
while($row = mysql_fetch_array($res))
$value = $row[0];
//echo $value;
return $value;


把value1的值alert出来，怎么数据库新数据插入后为什么没变化呢？

js是客户端运行的语言
php是服务器端运行的语言
他们的执行顺序是，先php， 后js
也就是，当你在浏览器等终端看到js的时候，php已经运行完成并且“熄灯睡觉”去了！
你在客户端刷新js，那只是浏览器等在运行而已，与php何关呢？？？
你要php不断的运行，那你就要在客户端不断地请求服务器运行php
而不只是让js在客户端不停的循环执行！追问

嗯，原理上已经明白了，非常感谢，有没有这方面的例子啊，给个链接什么的吧，应该怎么交互呢

追答

用ajax
如果用jquery， 那ajax就相当方便了
比如，把你的php代码单独保存成一个文件，比如是a.php
然后在你要显示数据的页面，加一个div标签
这里用户显示数据
然后js代码是
setInterval(function()
$('#a').load('a.php');
,1000);

jqeury中， load方法的请求任意文件，并将请求回来的结果源赋值给指定标签对象
当然，不用jquery也行，用原生的js代码也可以
只是原生的js代码中的ajax代码非常复杂，而且兼容性也很难搞！
具体代码我也没记住，你可以百度一下 js ajax

不过要注意的是，由于浏览器的安全机制， ajax不允许跨域， 也就是， ajax代码在A网站， php代码在B网站，这样是请求不到的， 会出现js错误： 拒绝访问！

参考技术A ....前后台交互不是你这样的。。。。。
ajax 之类的才对。追问

额，应该怎么弄呢，第一次弄这个东西，实在头疼

追答

a.php

setInterval(function()
$.ajax(
url:'a.php',
type:'POST',
dataType:'text',
data:'&a=1',
success:function(mydata)
alert(mydata);



);

,2000);

一个栗子

本回答被提问者和网友采纳

setTimeout() 与 setInterval() 的源码分析

最近笔者在开发的过程中，因为需要对页面进行动态渲染，又不想一直刷新页面数据，而是让浏览器根据客户需要动态对渲染数据，这个时候就用到了setInterval这个函数，可是这个函数和setTimeout()相比又有什么区别呢？我们知道：

• setTimeout()是绑定在浏览器window的一个方法，可以通过这个方法指定一段代码或者函数在多少毫秒(ms)后执行，并返回该定时器的编号，当然了我们可以通过clearTimeout()取消代码的执行
• setInterval()绑定在浏览器window的一个方法，可以通过setInterval指定一段代码或函数定时在多少毫秒(ms)后执行，并传回该定时器的编号，当然了我们可以通过clearInterval()取消代码的执行
  最有效且直接的就是做个小实验感受下：

setInterval()执行方法其实是将需执行的代码加入到任务队列，直到轮到代码执行时，确定时间是否已经到了，若到达则执行代码

var startTime=new Date();
var func = function()
console.log(‘start: ‘ + (new Date()-startTime));
for(var i=0; i<1000000000; i++)
console.log(‘end: ‘ + (new Date()-startTime));
;
setInterval(func,1000);

上面这段代码的执行之后，你会发现setInterval的end与start时间跳动非常大，并不是我们设置的1000ms。由于setInterval是一开始就标定了执行的时间点，当所注册的函数(func)超过，因此不会是固定的1000ms。

setTimeout()的用法大致与setInterval相同，不同的在于定时执行，我们同样来测试延迟执行的现象

var startTime=new Date();
var func = function()
console.log(‘start: ‘ + (new Date()-startTime));
for(var i=0; i<1000000000; i++);
console.log(‘end: ‘ + (new Date()-startTime));
setTimeout(func,1000);
;
setTimeout(func,1000);

观察下图可以发现 setTimeout 所设置的时间间隔，会因为目前任务队列所执行的代码而可能发生延误执行的情况，我们可以发现上面这段代码，执行func的end与start时间间隔基本上是符合我们所设定的1000ms

透过现象看本质，我们不妨看下这两个函数的源码

从函数声明可以知道setInterval这里允许传参，允许我们传入一个方法，让其在一定时间(number)后执行，其时间等待依赖于调度器_scheduler，而方法的执行是由_fnAndFlush来负责调控的，不过由于有_requeuePeriodicTimer这个方法的存在使得时间间隔不是我们所设固定1000ms

....
case ‘setInterval‘:
  task.data![‘handleId‘] = this._setInterval(
      task.invoke, task.data![‘delay‘]!,
      Array.prototype.slice.call((task.data as any)[‘args‘], 2));
  break; 
....

private _setInterval(fn: Function, interval: number, args: any[]): number 
  let id = Scheduler.nextId;
  let completers = onSuccess: null as any, onError: this._dequeuePeriodicTimer(id);
  let cb = this._fnAndFlush(fn, completers);

  // Use the callback created above to requeue on success.
  completers.onSuccess = this._requeuePeriodicTimer(cb, interval, args, id);

  // Queue the callback and dequeue the periodic timer only on error.
  this._scheduler.scheduleFunction(cb, interval, args, true);
  this.pendingPeriodicTimers.push(id);
  return id;
  

先来看下_fnAndFlush的代码，这个函数其实是将我们的所需要执行的函数刷入内存中，等待浏览器的执行

private _fnAndFlush(fn: Function, completers: onSuccess?: Function, onError?: Function):
    Function 
  return (...args: any[]): boolean => 
    fn.apply(global, args);

    if (this._lastError === null)   // Success
      if (completers.onSuccess != null) 
        completers.onSuccess.apply(global);
      
      // Flush microtasks only on success.
      this.flushMicrotasks();
     else   // Failure
      if (completers.onError != null) 
        completers.onError.apply(global);
      
    
    // Return true if there were no errors, false otherwise.
    return this._lastError === null;
  ;

我们不妨来看下_requeuePeriodicTimer这个方法所完成的功能的特点。其会将浏览器内存中存在的函数加入队列中执行（如果存在的话），函数功能完成过程中已经进入下个scheduler的执行周期，即函数在执行过程中还有一个计时器在等待下个函数的执行。正如实验中，我们观察到的所有的start间隔大致是1000ms

private _requeuePeriodicTimer(fn: Function, interval: number, args: any[], id: number): Function 
  return () => 
    // Requeue the timer callback if it‘s not been canceled.
    if (this.pendingPeriodicTimers.indexOf(id) !== -1) 
      this._scheduler.scheduleFunction(fn, interval, args, true, false, id);
    
  ;

对于setTimeout这里允许传参，允许我们传入一个方法，让其在一定时间(number)后执行，其时间等待依赖于调度器_scheduler，而调度器正是让我们的函数时间间隔符合我们设置的1000ms的原因，而方法的执行则是由_fnAndFlush来负责调控的，因为setTimeout并不会将执行函数推入队列中，因此计时器不会运行直到前一个周期的函数都执行完毕之后才开始进入下一个周期，正如实验代码中所写的等待1000ms

...
case ‘setTimeout‘:
  task.data![‘handleId‘] = this._setTimeout(
      task.invoke, task.data![‘delay‘]!,
      Array.prototype.slice.call((task.data as any)[‘args‘], 2));
  break;
...
private _setTimeout(fn: Function, delay: number, args: any[], isTimer = true): number 
  let removeTimerFn = this._dequeueTimer(Scheduler.nextId);
  // Queue the callback and dequeue the timer on success and error.
  let cb = this._fnAndFlush(fn, onSuccess: removeTimerFn, onError: removeTimerFn);
  let id = this._scheduler.scheduleFunction(cb, delay, args, false, !isTimer);
  if (isTimer) 
    this.pendingTimers.push(id);
  
  return id;
   

参考资料：
https://www.jeffjade.com/2016/01/10/2016-01-10-javacript-setTimeout/
https://www.jeffjade.com/2016/01/10/2016-01-10-javaScript-setInterval/