精华内容
下载资源
问答
  • settimeout

    2021-06-12 05:50:24
    js中setTimeout的执行机制具体是怎么样的?如果setTimeout里的函数最后执行,那图一里的36行的var b=a(0);不就被38setTimeout(b,1000)意思是在1000毫秒后输出b。 图一是在36行给b赋了值然后输出了0,然后在38行又给b...

    js中setTimeout的执行机制具体是怎么样的?

    如果setTimeout里的函数最后执行,那图一里的36行的var b=a(0);不就被38setTimeout(b,1000)意思是在1000毫秒后输出b。 图一是在36行给b赋了值然后输出了0,然后在38行又给b赋值然后输出1。输出为0,1 图二是在16行给b赋了值,然后在17行又给b赋了值这时b变成了1,在用setTimeout输出就变成了输出为1,1

    Javascript中setTimeout的用法?

    99dbba598161dfd2e72cc8d7d2fbadf5.png

    下面这段代码中为什么要使用两个setTimeout?另外为什么没有$(document)setTimeout(code,millisec) var t = setTimeout("javascript语句", 毫秒) setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

    setTimeout()和setInterval()方法的区别?

    因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的 很多人习惯于将setTimeout包含

    JS 用setTimeout 那本身的函数不就永远不会终止吗

    比如 function f(){ alert("k"); setTimeout(f,1000) } 这样一来 程序占首先,setTimeout是可以取消的,可以不让其永远不终止,方法如下: var timer = null;function f(){ alert("k"); timer = setTimeout(f,1000);}// 在另外一个函数中,在某种条件下,取消之前的定时器clearTimeout(timer);这样。

    javaScript settimeout 时间最大能设置多少。

    我发现我设置为3000*10000 有效 9000*10000就无效。到底最大值是多少?最大值不清楚。 不过,为什么要设这么大?你想一天后才触发运作?那可以分开来实现呀。 var val = 0, max = 90000; function run(){ val ++; if(val

    javaScript中的setTimeout返回值有什么用?

    setTimeout(function,time) 用处是延迟time毫秒再此执行function,而他返回的是这个超时调用的id,也就是这个setTimeout的唯一标示符。 假如你向阻止这个超时调用,就需要用到这个id 如 var st=setTimeout(function,time); 这是你忽然向立即执行

    js setTimeout函数不执行

    function docomment_form_hidden(doid, id) { var showid = 'docomment_大哥们你们不知道有闭包这东西吗..function 内是可以有function的 function docomment_form_hidden(doid, id) { var showid = 'docomment_form_'+doid+'_'+id; var hiddenid = 'docomment_form_show_'+doid+'_0'; var focusid = 'do_message_'+d

    为什么这种写法,js的setTimeout只执行一次?

    setTimeout是延迟执行,只执行一次,不是定时器 多次间断执行要用setInterval var timer = setInterval( function(){}, 1000); 取消用clearInterval(timer);

    JavaScript 多个settimeout的问题

    //gridview渐隐效果 function changeColor(obj) { var row=obj.parentEl你把两个的时间岔开试一下,white效果被或一个效果覆盖,所以看不到white效果 试着 执行以下代买看看: s

    jquery写一个定时器,为什么setTimeout不执行

    展开全文
  • setTimeout执行时间

    2021-06-02 22:01:56
    经典问题: js setTimeout 0秒,会立即执行吗? setTimeout 1000ms 若是没有...setTimeout(function(){console.log("setTimeout执行了")},0) for(var i=0;i<1000000000;i++){ if(i==999999999){ console.log(i);

    经典问题:

    • js setTimeout 0秒,会立即执行吗?
    • setTimeout 1000ms 若是没有其他任务,是到了时间立即执行么,若不是间隔是多久(浏览器刷新率按60帧算就是1000、60=16.7ms)
    setTimeout(function(){console.log("setTimeout执行了")},0)
    for(var i=0;i<1000000000;i++){
            if(i==999999999){
                    console.log(i);
            }
    }
    //输出:大约过了三秒后(本电脑测试),控制台才显示出 999999999,其次才显示出 “setTimeout执行了”。

    异步执行的运行机制如下(参考 JavaScript 运行机制详解)

    (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
    (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
    (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
    (4)主线程不断重复上面的第三步。

    • 因为 JavaScript 是一个单线程序的解释器,因此一定时间内只能执行一段代码。
    • 为了控制要执行的代码,就有一个 JavaScript 任务队列。
    • 这些任务会按照将它们添加到队列的顺序执行。
    • setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行

    总结:setTimeout并不能按照设置的定时准时触发,这点可以从js事件循环来解释。当设置了该定时器时,假设定时1000毫秒,

    • 首先,绑定函数交由定时器模块处理;
    • 然后,当到达1000毫秒时,定时器模块会将该绑定事件加入到任务队列中,注意,这个时候已经到了我们的预设时间了,但是实际上函数并没有被执行。
    • 最后,当任务队列中优先于该任务的函数执行完成后,才会执行该定时器绑定的函数。所以这里的实际执行的时间相比预设时间会更晚。

    利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因:

    • setTimeout的执行时间并不是确定的。在Javascript中, setTimeout 任务被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

    • 刷新频率受屏幕分辨率屏幕尺寸的影响,因此不同设备的屏幕刷新频率可能会不同,而 setTimeout只能设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同。

    以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致,从而引起丢帧现象。 那为什么步调不一致就会引起丢帧呢?

    首先要明白,setTimeout的执行只是在内存中对图像属性进行改变,这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致,就可能会导致中间某一帧的操作被跨越过去,而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次,而setTimeout每隔10ms设置图像向左移动1px, 就会出现如下绘制过程:

    • 第0ms: 屏幕未刷新,等待中,setTimeout也未执行,等待中;

    • 第10ms: 屏幕未刷新,等待中,setTimeout开始执行并设置图像属性left=1px;

    • 第16.7ms: 屏幕开始刷新,屏幕上的图像向左移动了1px, setTimeout 未执行,继续等待中;

    • 第20ms: 屏幕未刷新,等待中,setTimeout开始执行并设置left=2px;

    • 第30ms: 屏幕未刷新,等待中,setTimeout开始执行并设置left=3px;

    • 第33.4ms:屏幕开始刷新,屏幕上的图像向左移动了3px, setTimeout未执行,继续等待中;

    从上面的绘制过程中可以看出,屏幕没有更新left=2px的那一帧画面,图像直接从1px的位置跳到了3px的的位置,这就是丢帧现象,这种现象就会引起动画卡顿。

    setTimeou中的方法,在for循环结束后才执行,正是 因为执行栈中的同步任务执行完之后,任务对列中的任务才能执行,所以导致 “setTimeout执行了” 在延迟了接近三秒之后才会执行。

    requestAnimationFrame

    requestAnimationFrame和屏幕刷新是同步的,也就是说屏幕每刷新一次,requestAnimationFrame就触发一次。与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。

    如果屏幕刷新率是60Hz,那么回调函数就每16.7ms(1000/60)被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。

    除此之外,requestAnimationFrame还有以下两个优势:

    • CPU节能:使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。

    • 函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。

    requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
    在隐藏或不可见的元素中,requsetAnimationFrame 将不会进行重绘或回流,这就意味着更少的 CPU、GPU 和内存使用量。requestAnimationFrame是浏览器专门提供的 api,在运行时浏览器会自动优化方法的调用,并且页面不是激活状态下,动画会暂停执行,有效节省 CPU 开销。

    IE9-浏览器不兼容该方法,可以使用 setTimeout 来兼容
    
    if(!window.requestAnimationFrame){
    	let lastTime = 0;
    	window.requestAnimationFrame = function(callback){
    		const currTime = new Date().getTime();
    		const timeToCall = Math.max(0, 16.7-(currTime - lastTime));
    		const id = window.setTimeout(function(){
    			callback(currTime + timeToCall);
    		},timeToCall);
    		lastTime = currTime + timeToCall;
    		return id;
    	}
    }
    
    if(!window.cancelAnimationFrame){
    	window.cancelAnimationFrame = function(id){
    		clearTimeout(id);
    	}
    }

    案例说明: 

    let i=0
    const cb=()=>{i++;console.log(i);requestAnimationFrame(cb)}
    requestAnimationFrame(cb)
    setTimeout(()=>{console.log("setTimeout1"+i);},0);
    setTimeout(()=>{console.log("setTimeout"+i);},1000);

    如下输出,浏览器默认刷新率基本是每秒60帧,那么 requestAnimationFrame时间间隔就是16.7ms,所以setTimeout 0的实在1之后打印即16.7ms后执行的,1000ms的setTimeout实在60或61输出后执行的,即60*16.7=1000也就是正好1000ms,61就是在延迟了一帧执行的,所以setTimeout不是到了时间就立即执行。

    展开全文
  • 下面是今日头条的一道前端面试题:async function async1() {console.log("async1 start");await async2();console.log("async1 end");}async function async2() {console.log("async2");...setTimeout(fu...

    下面是今日头条的一道前端面试题:

    async function async1() {

    console.log("async1 start");

    await async2();

    console.log("async1 end");

    }

    async function async2() {

    console.log("async2");

    }

    console.log("script start");

    setTimeout(function() {

    // setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1");

    resolve();

    }).then(function() {

    console.log("promise end");

    });

    console.log("script end");

    运行结果:

    script start

    async1 start

    async2

    promise1

    script end

    promise end

    async1 end

    setTimeout

    这里涉及到Microtasks、Macrotasks、event loop 以及 JS 的异步运行机制。

    一、 单线程模型

    单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。

    注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。

    二、同步任务和异步任务

    程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

    同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

    异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

    举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

    三、任务队列和事件循环

    JavaScript 运行时,除了一个正在运行的主线程,引擎还提供一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。(实际上,根据异步任务的类型,存在多个任务队列。为了方便理解,这里假设只存在一个队列。)

    首先,主线程会去执行所有的同步任务。等到同步任务全部执行完,就会去看任务队列里面的异步任务。如果满足条件,那么异步任务就重新进入主线程开始执行,这时它就变成同步任务了。等到执行完,下一个异步任务再进入主线程开始执行。一旦任务队列清空,程序就结束执行。

    异步任务的写法通常是回调函数。一旦异步任务重新进入主线程,就会执行对应的回调函数。如果一个异步任务没有回调函数,就不会进入任务队列,也就是说,不会重新进入主线程,因为没有用回调函数指定下一步的操作。

    JavaScript 引擎怎么知道异步任务有没有结果,能不能进入主线程呢?答案就是引擎在不停地检查,一遍又一遍,只要同步任务执行完了,引擎就会去检查那些挂起来的异步任务,是不是可以进入主线程了。这种循环检查的机制,就叫做事件循环(Event Loop)。维基百科的定义是:“事件循环是一个程序结构,用于等待和发送消息和事件(a programming construct that waits for and dispatches events or messages in a program)”。

    四、Microtasks(微任务)、Macrotasks(宏任务)

    在高层次上,JavaScript 中有 microtasks 和 macrotasks(task),它们是异步任务的一种类型,Microtasks的优先级要高于macrotasks,microtasks 用于处理 I/O 和计时器等事件,每次执行一个。microtask 为 async/await 和 Promise 实现延迟执行,并在每个 task 结束时执行。在每一个事件循环之前,microtask 队列总是被清空(执行)。

    其中宏任务包括:

    script(整体代码)

    setTimeout

    setImmediate

    setInterval

    I/O

    UI 渲染

    ajax请求不属于宏任务,js线程遇到ajax请求,会将请求交给对应的http线程处理,一旦请求返回结果,就会将对应的回调放入宏任务队列,等请求完成执行。

    微任务包括:

    process.nextTick

    Promise

    Object.observe(已废弃)

    MutationObserver(html5新特性)

    执行过程

    上面第三条说了JS 主线程拥有一个 执行栈(同步任务) 和 一个 任务队列(microtasks queue),主线程会依次执行代码:

    当遇到函数(同步)时,会先将函数入栈,函数运行结束后再将该函数出栈;

    当遇到 task 任务(异步)时,这些 task 会返回一个值,让主线程不在此阻塞,使主线程继续执行下去,而真正的 task 任务将交给 浏览器内核 执行,浏览器内核执行结束后,会将该任务事先定义好的回调函数加入相应的任务队列(microtasks queue/ macrotasks queue)中。

    当JS主线程清空执行栈之后,会按先入先出的顺序读取microtasks queue中的回调函数,并将该函数入栈,继续运行执行栈,直到清空执行栈,再去读取任务队列。

    当microtasks queue中的任务执行完成后,会提取 macrotask queue 的一个任务加入 microtask queue, 接着继续执行microtask queue,依次执行下去直至所有任务执行结束。

    可能有的同学看到这里云里雾里,下面举例说明:

    setTimeout:

    console.log('第一行')

    setTimeout(() => {

    console.log('第三行')

    });

    console.log('第五行')

    // 输出顺序第一行->第五行->第三行

    1.1. 运行打印第一行

    1.2. 遇到宏任务setTimeout,把回调函数加入宏任务队列

    1.3. 向下执行打印第五行

    a195fbea7dc6?utm_campaign=haruki

    在第三步执行完成时

    1.4. 同步执行完毕,没有微任务,去宏任务读取任务队列,取出setTimeout回调函数,执行打印第三行

    a195fbea7dc6?utm_campaign=haruki

    执行宏任务

    Promise:

    console.log("第一行");

    let promise = new Promise(function(resolve) {

    console.log("before resolve");

    resolve();

    console.log("after resolve");

    }).then(function() {

    console.log("promise.then");

    });

    console.log("script end");

    // 输出顺序: 第一行->promise1->before resolve->after resolve->script end->promise.then

    2.1. 运行打印第一行

    2.2. promise构造函数是同步的,执行console.log("before resolve");

    2.3. resolve()是异步的,.then回调放入微任务队列,向下执行,

    2.4. 打印after resolve

    2.5. 继续执行打印script end

    2.6. 取出微任务,打印promise.then

    a195fbea7dc6?utm_campaign=haruki

    执行图

    async await:

    async function async1(){

    console.log('async1 start');

    await async2();

    console.log('async1 end')

    }

    async function async2(){

    console.log('async2')

    }

    console.log('script start');

    async1();

    console.log('script end')

    // 输出顺序:script start->async1 start->async2->script end->async1 end

    a195fbea7dc6?utm_campaign=haruki

    执行流程

    async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体

    setTimeout+Promise

    console.log("start");

    setTimeout(function() {

    console.log("timeout");

    }, 0);

    new Promise(function(resolve) {

    console.log("promise");

    resolve();

    }).then(function() {

    console.log("promise resolved");

    });

    console.log("end");

    // 执行顺序start->promise->end->promise resolved->timeout

    4.1. 输出start

    4.2. setTimeout回调函数放入宏任务

    4.3. 输出promise

    4.4. resolve()异步,回调函数放入微任务

    4.5. 输出end

    4.6. 执行微任务

    4.7. 输出promise resolved

    4.8. 执行宏任务

    4.9. 输出timeout

    第一步,执行同步代码:

    async function async1() {

    console.log("async1 start"); // 同步代码2

    await async2(); // 调用async2(),async2()的返回值是promise,不执行promise的resolve,让出线程

    console.log("async1 end");

    }

    async function async2() {

    console.log("async2"); // 同步代码3

    }

    console.log("script start"); // 同步代码1

    setTimeout(function() {

    // 异步 setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1"); // 同步代码4

    resolve();

    }).then(function() {

    console.log("promise end"); // 不执行

    });

    console.log("script end"); // 同步代码5

    console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ;

    setTimeout()是异步任务,加入异步队列,不执行;

    然后调用async1(),执行这个方法体内的同步函数,打印console.log("async1 start"); // 同步代码2;

    向下执行,遇到await关键字,调用async2(),执行同步代码打印console.log("async2"); // 同步代码3,让出线程。await是让出当前函数线程,交给函数外的代码执行;

    线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1,resolve是异步函数,加入异步队列,此时继续执行同步函数,回到await关键字处,执行剩余代码;

    async2()是异步方法,默认返回promise,所以把返回的promise加入异步队列;

    此时没有同步任务,就去执行异步任务,因为setTimeout()的优先级低于promise,所以会优先执行promise队列。

    此时异步队列任务顺序: setTimeout()-new Promise().resolve()-async2().resolve(),setTimeout优先级低,所以先执行下一个,打印console.log("promise end");

    继续执行异步任务,async2()执行完毕,同步await,这时候同步向下执行console.log("async1 end");

    最后执行setTimeout()。

    a195fbea7dc6?utm_campaign=haruki

    执行顺序图

    回到最初的面试题:

    async function async1() {

    console.log("async1 start"); // 同步代码2

    await async2(); // 调用async2(),async2()的返回值是promise,不执行promise的resolve,让出线程

    console.log("async1 end");

    }

    async function async2() {

    console.log("async2"); // 同步代码3

    }

    console.log("script start"); // 同步代码1

    setTimeout(function() {

    // 异步 setTimeout放入event-loop中的macro-tasks队列,暂不执行

    console.log("setTimeout");

    }, 0);

    async1();

    new Promise(function(resolve) {

    console.log("promise1"); // 同步代码4

    resolve();

    }).then(function() {

    console.log("promise end"); // 不执行

    });

    console.log("script end"); // 同步代码5

    console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ;

    setTimeout()是异步任务,加入宏任务队列,不执行;

    然后调用async1(),执行这个方法体内的同步函数,打印console.log("async1 start"); // 同步代码2;

    向下执行,遇到await关键字,调用async2(),执行同步代码打印console.log("async2"); // 同步代码3,让出线程。await是让出当前函数线程,交给函数外的代码执行;

    线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1,resolve是异步函数,加入微任务队列,此时继续执行同步函数,回到await关键字处,执行剩余代码;

    此时没有同步任务,就去执行微任务队列任务,所以会优先执行promise队列。

    此时微队列任务顺序:new Promise().resolve()- console.log("async1 end");,s所以先执行下一个,打印 console.log("promise end")`;

    这时候同步向下执行console.log("async1 end");

    最后执行宏任务setTimeout()。

    展开全文
  • 1. SetTimeOut()1.1 SetTimeOut()语法例子1.2 用SetTimeOut()执行Function1.3 SetTimeOut()语法例子1.4 设定条件使SetTimeOut()停止1.5 计分及秒的counter2. ClearTimeout()3. Set Flag10.1 setTimeout( )...

    1. SetTimeOut()

    1.1 SetTimeOut()语法例子

    1.2 用SetTimeOut()执行Function

    1.3 SetTimeOut()语法例子

    1.4 设定条件使SetTimeOut()停止

    1.5 计分及秒的counter

    2. ClearTimeout()

    3.  Set Flag

    10.1 setTimeout( )

    setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。

    1. setTimeout( ) 語法例子

    練習-69 等候三秒才執行的 alert( )

    在 第 3 章 說到 alert 對話盒, 一般是用按鈕叫出來, 在這練習, 你會看到網頁開啟後 3 秒, 就會自動出現一個 alert 對話盒。

    1. 請用瀏覽器開啟示範磁碟中的 timeout1.htm, 這檔案有以下內容:

    示範網頁

    請等三秒!

    2. 留意網頁開啟後三秒, 就會出現一個 alert 對話盒。

    setTimeout( ) 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的 method 或 function, 有以下語法:

    88333d174f03d0a30b86b352fbfde9dc.gif

    今次例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method。

    2. 用 setTimeout( ) 來執行 function

    setTimeout( ) 通常是與 function 一起使用, 以下是一個較上個練習複雜的例子。

    練習-70 狀態列中自動消失的文字

    在練習-20, 你看過如何用按鈕在狀態列顯示文字, 然後再用按鈕消除文字, 在這練習, 你看到如何用按鈕在狀態列顯示文字, 而這文字會在三秒後自動消失。

    1. 請用瀏覽器開啟示範磁碟中的 timeout2.htm, 這檔案有以下內容:

    示範網頁

    2. 請在按鈕上按一下, 你應見到狀態列出現 Hello 這字, 留意過了三秒, 這字就會消失。

    1. 這處先設定一個名為 clearWord( )的 function, 作以下定義:

    window.status=""

    這是用來消除狀態列的文字 (請看練習-20 的說明), 瀏覽器執行 clearWord( ) , 就會消除狀態列的文字。

    2. 今次按鈕設定了啟動以下兩項工作, 用 , 分隔, 瀏覽器會順序執行這兩項工作:

    onClick="window.status='Hello' , setTimeout('clearWord( )',3000) "

    3. 今次的 setTimeout( )有以下設定:

    7e1cda49b1eec8d061a544dcbcb73baa.gif

    這是設定等 3 秒 (3000 milliseconds) 瀏覽器就會執行 clearWord( )這一個function。

    在第 2 章, 你看過如何使到父視窗開啟時自動開啟一個子視窗, 若觀看者不關閉這子視窗, 這子視窗就會一路開啟。看過以上的練習, 請你設計一個會開啟子視窗的網頁, 而這子視窗在開啟後兩秒, 就會自動關閉。

    3. 不斷重複執行的 setTimeout( )

    setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啟動第三個, 這樣循環下去, 這 setTimeout( )就會不斷執行。

    練習-71 自動每秒加 1 的 function

    在這練習, 你看到如何使用 setTimeout( )令文字框的數值每秒就加 1, 當然你也可以設定其他遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。

    1. 請用瀏覽器開啟示範磁碟中的 timeout3.htm, 這檔案有以下內容:

    2. 網頁開啟後, 請你留意文字框中的數值轉變。

    3. 請你將這檔案複製去硬碟, 更改一些設定, 例如 x = x+5, 或將等候時間改為5000, 看有什麼反應。

    1. 這網頁有兩個 script, 第一個是設定countSecond( ) 這個 function, 第二個在後的是在網頁完全載入後, 就啟動這 function。

    2. 留意今次以下的設定:

    functioncountSecond( ){x=x+1  document.fm.displayBox.value = x  setTimeout("countSecond( )",1000)}

    當 countSecond( ) 啟動後, 就會啟動 setTimeout( ), 這個 method 在一秒後又啟動 countSecond( ),countSecond( )啟動後又啟動setTimeout( ) , 所以得出的結果是 countSecond( )每秒執行一次。

    3. 在 JavaScript, 我們是使用這處說的方法使到一些事項不斷執行, 其中一個用途是顯示轉動時間, 另一個用途是設定跑動文字, 隨後的章節會有例子。

    用上述的方法設定時間, setTimeout( ) 雖然設定了是一秒, 但瀏覽器還有另外兩項功能要執行, 所以一個循環的時間是稍多於一秒, 例如一分鐘可能只有58 個循環。

    4. 設定條件使 setTimeout( ) 停止

    setTimeout( )的迴圈開始後, 就會不斷重複, 在上個練習, 你看到文字框的數字不斷跳動, 但我們是有方法使到數字跳到某一個數值就停下來, 其中一個方法是用if...else設定一個條件, 若是 TRUE 就繼續執行 setTimeout( ) , 若是 FALSE 就停止。

    例如要使到上個練習的 counter 跳到 20 就停下, 可將有關的 function 作以下的更改。

    functioncountSecond( ){ if (x<20)   {x=x+1document.displaySec.displayBox.value =xsetTimeout("countSecond( )", 1000)      }}

    5. 計分及計秒的 counter

    在前面的練習, 相信你已學識如何使用 setTimeout( ), 現在請你看一個較複習的例子。

    練習-72 計時的 counter

    在這練習, 你要設定兩個文字框, 一個顯示分鐘, 另一個顯示秒, 網頁開啟後, 就會在這兩個文字框中自動計時。

    1. 請用瀏覽器開啟示範磁碟中的 timeout4.htm, 這檔案有以下內容:

    你在本網頁的連線時間是:  秒。

    2. 請你留意兩個文字框中的數字轉變。

    1. 這網頁有兩個 function, 一個用來計分鐘, 一個用來計秒。在這處, 筆者只是示範setTimeout( )的操作, 因為計時器有其他更精簡的寫法。(留意: 這方式的計時並不準確。)

    2. 留意計秒的 function:

    functioncountSec( ){x=x+1z=x%60document.displaySec.displayBox.value=zsetTimeout("countSec( )",1000)

    }

    這處的 % 符號是 modulus (餘數), 例如z=x%60 表示先進行 x/60, 得出的餘數作為z 這變數, 例如 82 秒, modulus 就是 22, 所以文字框會顯示 22 而不是 82。

    3. 若你要將單位數字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:

    functioncountSec( ){x=x+1z=x%60if (z<10) {z= "0" +z}  document.displaySec.displayBox.value=zsetTimeout("countSec( )",1000)}

    10.2 clearTimeout( )

    在前一節, 你看過如何使用 setTimeout( )來使到瀏覽器不斷執行一個 function, 當一個 setTimeout( )開始了循環的工作, 我們要使它停下來, 可使用clearTimeout( ) 這 method。

    clearTimout( ) 有以下語法: clearTimeout(timeoutID)

    要使用 clearTimeout( ), 我們設定 setTimeout( ) 時, 要給予這 setTimout( ) 一個名稱, 這名稱就是 timeoutID , 我們叫停時, 就是用這 timeoutID來叫停, 這是一個自訂名稱, 但很多程式員就以 timeoutID 為名。

    在下面的例子, 筆者設定兩個 timeoutID, 分別命名為 meter1 及 meter2, 如下:

    timeoutID ↓meter1= setTimeout("count1( )",1000)meter2= setTimeout("count2( )",1000)

    使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設定 clearTimeout( )時, 就可指定對哪一個setTimeout( )有效, 不會擾及另一個setTimeout( )的操作。

    練習-73 可停止的 setTimeout( )

    這練習以練習-71 為藍本, 但作了兩個改變: (1) 有兩個 setTimeout( ), (2) 有兩個按鈕, 分別可停止這兩個 setTimout( )。

    1. 請用瀏覽器開啟示範磁碟中的 clear.htm, 這檔案有以下內容:

    2. 留意網頁中的兩個文字框及內裡變動的數字, 每個文字框旁有兩個按鈕, 請你試試兩個按鈕的反應。

    3. 請你連續按多次 [繼續計時] 的按鈕, 留意數值的跳動加快了, 原因是每按一次就啟動 function 一次, 每個 function 都令數值跳動, 例如啟動同一的 function 四次, 就會一秒跳四次。(請看下一節)

    10.3 Set flag

    前個練習說到我們用一個按鈕來啟動一個 function, 每按一下就會啟動這 function 一次, 請看以下例子。

    練習-74 效果重複的 setTimeout( )

    這練習實際是將 練習-73 簡化, 只有一個計時器, 筆者想示範的是每按 [繼續計時] 一次, 就會啟動 count( ) 這 function 一次。

    1. 請用瀏覽器開啟示範磁碟中的 flag1.htm, 這檔案有以下內容:

    2. 網頁開啟後, 你應見到文字框中的數字跳動, 請你按四次 [繼續計時], 留意這會加快數字跳動, 原因是有關的 function 被開啟了多個, 每個都會使數字轉變。

    3. 按了四次 [繼續計時] 的按鈕後, 請你按 [停止計時] 的按鈕, 你會發現要按五次才能停止數字跳動。

    在編寫程式時, 我們常要提防使用者作出一些特別動作, 例如使用者按兩次 [繼續計時] 按鈕, 這計時器就失準了。我們是否有辦法使到一個按鈕被按一次就失效呢? 這就不會產生重複效果。

    筆者藉這處的例子 (隨後還有多個例子), 解說程式中一個 set flag (設定旗標) 的概念, flag 是一個記認, 一般來說, 這可以是 0 或是 1 (也可用 on 或 off, 或任何兩個自選的名稱或數字), 但也可以是 2、3、4 或更大的數字, 在這例子有以下設定:

    1. 程式開啟時flag=0。

    2. 當 counter( )執行時會順便將 flag 變為 1。

    3. 在 [繼續計時] 這按鈕的反應中, 會先檢查 flag 是 0 或是 1, 若是 0 就會產生作用, 若是 1 就沒有反應。

    4. 使用這 flag 的方式, count( ) 這 function 開啟後, [繼續計時] 這按鈕就沒有作用。

    這處的 flag 是一個變數, 可任意取名, 我們用 flag來稱呼這變數的原因, 是因為這變數好處一支旗, 將旗豎起 (flag is on), 就會產生一個作用, 將旗放下 (flag is off), 就產生另一個作用。

    練習-75 只可開啟一次的 function

    這練習是將上個練習加多一個 flag, 使到每次只能有一個 count( ) 這 function 在進行。

    1. 請用瀏覽器開啟示範磁碟中的 flag2.htm, 這檔案有以下內容:

    2. 在網頁中, 你應見到三個按鈕及文字框中的數字跳動。

    3. 請你按 [Show flag] 這按鈕, 應見到一個話對盒顯示 flag 是 1。

    4. 請你按 [停止計時] 這按鈕, 數字停止跳動, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 是 0。

    5. 請你按多次 [繼續計時] 這按鈕, 你應見到數字不會加快, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 變回 1。

    1. 這網頁第 4 行有這一句: flag=0 , 這是設定 flag 這變數及將初始值定為 0, 你也可將初始值定為 1, 隨後有關的 0 和 1 對調。

    2. count( ) 這 function 最後一句是flag=1 , 所以啟動 count( ) 後, flag 就會變為 1。

    3. [繼續計時] 的按鈕是用來啟動 restart( ), 這 function 有以下設定:

    function restart( ){ if (flag==0)    {count( ) }}

    這處的 if statement 檢查 flag 是否等於 0, 若是 0 就啟動 count( ), 若是 1 (即不是 0) 就沒有反應, 使用這方法, 若 count( ) 已在執行中, [繼續計時] 這按鈕不會有作用。

    這處的 flag=1 設定, 實際設為 1 或 2 或 3 等數值都是一樣的, 只要不是 0 就可以了, 所以這兩個相對的旗標, 看似是 "0" 和 "1", 實際是 "0" 和 "non-zero" (非-0)。

    4. [停止計時] 的按鈕有以下設定:

    onClick="clearTimeout(timeoutID);flag=0"

    這是停止 setTimeout( ) 的操作時, 同時將 flag 轉回 0, 這使到restart( )這 function 可以重新啟動count( )。

    展开全文
  • 面试官也在看的前端面试资料setTimeout 方法,就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器:fun...
  • 4种方案详解如何实现准时的setTimeout

    千次阅读 2021-05-10 00:48:18
    拿到这个问题,假设有这样的场景,我们需要用 setTimeout 做一个动画,并且需要控制他的频率,50ms 运行一次,首先我们先上图,来看看 setTimeout 的表现。 运行代码如下,通过一个计数器来记录每一次 setTimeout ...
  • setTimeout 实现原理, 机制JS 执行机制说起浏览器(或者说 JS 引擎)执行 JS 的机制是基于事件循环。由于 JS 是单线程,所以同一时间只能执行一个任务,其他任务就得排队,后续任务必须等到前一个任务结束才能开始执行...
  • 偶遇TypeScript setTimeout语法问题,百度没有结果。所以自己研究了一下 正常是这样的结构 setTimeout(function(){ ... },interval) 第一个参数是回调函数,第二个参数是间隔时间。与JavaScript不同,第一个参数...
  • setTimeout(表达式,延时时间)setInterval(表达式,交互时间)其中延时时间/交互时间是以豪秒为单位的(1000ms=1s)setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次setInterval在执行时,它从...
  • setTimeout():在指定的时间后执行一段代码。只执行一次。 setInterval():以固定的时间间隔,重复运行一段代码。可执行多次。 requestAnimationFrame():setInterval()的现代版本;在浏览器下一次重新绘制显示之前...
  • javascript.怎么退出定时器setTimeout...直接调用就可以了 function timedCount() { t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) }JS 用setTimeout 那本身的函数不就永远不会终止...
  • setTimeout vs nextTick 在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()函数。 我们将上面的代码用setTimeout替换nextTick: {{ currentTime }} 运行此代码片段。 首先看到3然后2021。它发生得...
  • 最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下。个人理解,如果有错误的地方还请指出。THX要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的。这个可以理解...
  • var t = setTimeout(function(){ tmpFunc() },500 * i); } 上面代码的问题是tmpBlockInfo总是得到最后的结果[i] .x / result [i] .y.因此,当超时运行函数时,我正在假设它看到什么结果[i] .x / result [i] .y在循环...
  • 浅析setTimeout与Promise

    2021-02-12 00:49:15
    正好在Stackoverflow上回答了一个关于setTimeout与Promise执行顺序相关的问题,于是总结这一知识点,与更多读者分享,同时完善JavaScript异步编程系列文章。前言我们先看一到常见的前端面试题:var p1 = new Promise...
  • 关于setTimeout的妙用

    2021-03-05 12:57:12
    定义在指定的延迟时间之后调用一个函数或执行一个代码片段这个是setTimeout最主要的功能,但也是很坑的地方,首先javascript其实是运行在单线程的环境下,意味者定时器会在未来的某个时间支持,但是具体的执行的时间...
  • setTimeout 和 clearTimeout

    2021-08-24 14:30:23
    function DealSomething() { //write some code window.setTimeout(function () { alert(“已经等待超过10分钟,自动关闭页面。”); }, 600000); } 这个例子的行为:不管是否处理完,超过10分钟后,都弹出这个alert...
  • setTimeout函数的参数

    2021-10-08 17:49:19
    setTimeout函数的参数 平常用setTimeout的时侯 setTimeout(function,timer) 查阅setTimeout的函数原型 var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); var timeoutID = setTimeout(function...
  • react 中运用setTimeout

    2020-12-23 14:28:21
    React中运用setTimeoutsetTimeout做轮询React由因而在内存中运转,所以即使是DOM对象已被销毁了,如果在组件卸载(componentWillUnmount)的时刻没有清晰掉定时器, setTimeout做轮回照样会在内存中一直运转...
  • react 中使用setTimeout

    2020-12-23 14:27:38
    React中使用setTimeoutsetTimeout做轮询React由于是在内存中运行,所以即使是DOM对象已经被销毁了,如果在组件卸载(componentWillUnmount)的时候没有清楚掉定时器, setTimeout做循环还是会在内存中一直运行...
  • setTimeout 是有最小延迟时间? MDN 文档 setTimeout 实际延时比设定值更久的原因:最小延迟时间 在浏览器中,setTimeout()/setInterval() 的每调用一次定时器的...
  • 我认为发生的事情是,一旦页面刷新,setTimeout就会被擦掉,所以它永远不会被触发。我需要页面来刷新内容,但也希望为用户提供一个显示发生了什么的对话框。这是我的代码:$.ajax({type: "POST",url: '@Url.Action(...
  • 随着时间的推移, setTimeout 实际执行的时间和理想的时间差值会越来越大,这就不是我们预期的样子。类比真实的场景,对于一些倒计时以及动画来说都会造成时间的偏差都是不理想的。 为什么 setTimeout 会不准时呢? ...
  • 众所周知:setTimeout是一个强制设置延迟的前端函数,你要是想周期性延时调用采用的是setInterval函数,所以被广泛应用于抽奖、钟表、刷新等多方领域,今天我们主要来谈谈他们的延迟。 常规应用: setTimeout...
  • 1. setTimeout 定时器一直是js动画的核心技术,但是它不够精准,因为定时器参数是指time 秒后放入异步队列中等待执行,如果前面有其他任务队列执行时间过长,则会导致动画延迟,效果不精准的问题。 requestAnimation...
  • js中setTimeout问题

    2021-12-04 19:07:32
    setTimeout( ()=> { console.log( i ); }, i*1000 ); //每隔一秒输出6 } 定时器并不是同步的,它会自动插入任务队列,等待当前文件的所有同步代码和当前任务队列里的已有事件全部运行完毕后才能执行。这时候 ...
  • setTimeout节省内存写法

    2021-09-13 16:08:38
    var oBox = document.getElementById('box'); var maxLeft = utils.win('clientWidth') - oBox.offsetWidth; var step = 5; var timer = null;... timer = window.setTimeout(move, 10); } move();
  • setTimeout在以前的js中是定时执行一个对象或函数,下面我来介绍jquery中的setTimeout函数使用方法有需要了解的朋友仔细的参考参考setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和...
  • 计时器setTimeout()

    2021-06-23 05:40:58
    setTimeout(代码,延迟时间);参数说明:1. 要调用的函数或要执行的代码串。2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。当我们打开网页3秒后,在弹出一个提示框,代码如下:setTimeout("alert('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 323,450
精华内容 129,380
关键字:

settimeout

友情链接: QQ幻想西游文字wap.rar