精华内容
参与话题
问答
  • setTimeout 在ext中怎么用啊,我setTimeout调用extjs的方法报找不到方法: 会有什么作用域的问题吗?
  • setTimeOut

    2019-09-16 09:05:37
    setTimeOut原理 上一次我在写 animation()函数的时候,说到了 setTimeOut的一些特点,这一次就是为了验证这些特点 setTimeOut 并不是在过了执行的时间(这个时刻)会立即触发,这个要看过了指定时间之后事件队列里...
    setTimeOut原理
    • 上一次我在写 animation()函数的时候,说到了 setTimeOut的一些特点,这一次就是为了验证这些特点
    • setTimeOut 并不是在过了执行的时间(这个时刻)会立即触发,这个要看过了指定时间之后事件队列里当前的事件是否是空,如果是,那么在那么时刻就会触发,如果不是,那么就是过了指定的时间之后,等待事件队列里当前的事件执行完才会触发
    • 因此 setTimeOut可能会出现这种情况,过了指定时间之后不会立即出发,需要过了一会才会触发
    测试 setTimeOut
    var time = Date.now()
    setTimeout(()=>{
        console.log(Date.now()-time)
        console.log("setTimeOut...")
    },300)
    console.log("ok...")
    

    在这里插入图片描述

    • 可以看见 过了指定时间之后,当前的事件队列为空,因此 setTimeOut可以在 300ms过后立即触发,但是如果将当前的事件数量增加了再来看看
    var time = Date.now()
    setTimeout(()=>{
        console.log(Date.now()-time)
        console.log("setTimeOut...")
    },300)
    // 2000 个 console.log("ok...")
    console.log("ok...")
    

    在这里插入图片描述

    • 可以看见这个时候已经不是300ms触发了,而是 764ms触发了
    • 延迟函数 setTimeout() 相当于将延迟之后执行的事件(也就是异步事件,或者说将来要执行的事件插入到当前事件队列里的最末尾,至于在不在指定时间之后立即触发,就要看看那个之后事件队列里是不是为空,如果是,就会立即触发,如果不是,那么就要等待当前的事件队列为空才会执行)
    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201605/19/1463640589_472588.png)
  • var ti=$("body"); var video=$(".catalogue_ul1 li[id*=video-]");...console.log("已选取"+video.length+"个小节,并已蓝色标明,请检查是否有遗漏,如有遗漏,概不负责"); setTimeout(function(){ $...
    var ti=$("body");
    var video=$(".catalogue_ul1 li[id*=video-]");
    var i=1;
    var v=1;
    video.css("color","blue");
    console.log("已选取"+video.length+"个小节,并已用蓝色标明,请检查是否有遗漏,如有遗漏,概不负责");
    setTimeout(function(){
    $('.speedTab15').click();
    $('.volumeIcon').click();
    console.log("已进行静音和1.5倍加速");
    },3000);
    ti.on("DOMNodeInserted",function(e){
    if(e.target.textContent=="关闭"){
    console.log("检测到第"+i+"个弹题窗口");
    window.setTimeout(function(){
    $(".popbtn_cancel").click();
    console.log("已关闭");
    },3000);
    i++;
    }
    else if(e.target.textContent=="本节视频,累计观看时间『100%』"){
    console.log("检测到视频观看完成,准备跳到下一节");
    $('.next_lesson_bg').find('a').trigger('click');
    console.log("已跳转");
    setTimeout(function(){
    $('.volumeIcon').click();
    $('.speedTab15').click();
    console.log("已进行静音和1.5倍加速");
    },6000);
    v++;
    console.log("目前播放了"+v+"个视频");
    }
    });

    用Google Chrome打开并登陆智慧树,打开网络视频播放界面,按F12;点击如下图 1所示位置,粘贴代码至下图 2所示位置,按回车。

    出现如下图变为蓝色即为成功!

     

     

    愉快的最小化吧!

    展开全文
  • 首先我说明,我只按火狐和谷歌搞的代码,所以别的浏览器例如ie就别我的代码,其他的可以自行尝试 首先打开控制台,f12或fn+f12 其次,如下图 setTimeout(function () { $('.speedTab15').click(); $('....

    首先我说明,我只按火狐和谷歌搞的代码,所以用别的浏览器例如ie就别用我的代码,其他的可以自行尝试

    注意事项:
    请不要拖动进度条,如果进度条满了,但你的任务没有达成不会跳完下一集。
    请稍微有一点点耐心,因为我的定时器设置了三秒检测一次,请不要自行操作,随他去吧

    在跳转到下一集会出现几秒的视频有声音,因为我需要确保下一页已经加载出来,包容电脑卡的同学

    首先打开控制台,f12或fn+f12

    其次,如下图
    在这里插入图片描述

    setTimeout(function () {
        $('.speedTab15').click();
        $('.volumeIcon').click();
        console.log("已进行静音和1.5倍加速");
    }, 3000);
    setInterval(function () {
        if ($('.el-dialog__header>div>h4').text() == "弹题测验") {
            window.setTimeout(function () {
                $(".topic-list :first-child").click();
                $(".el-icon-close").click();
                $(".videoArea").click();
            }, 1000);
        }
        if ($(".current_play div b:nth-child(2)").hasClass('time_icofinish') || $(".current_play div b:nth-child(3)").hasClass('time_icofinish')) {
            console.log("检测到视频观看完成,准备跳到下一节");
            $('.nextButton').click()
            $(".videoArea").click();
            setTimeout(function () {
                $('.volumeIcon').click();
                $('.speedTab15').click();
            }, 5000);
        } 
    }, 3000)
    

    代码解析:首先一个一次性的定时器进行模拟点击1.5倍速和静音,然后一个循环定时器进行检测是否有弹窗,标准就是是否有“弹题测验”,然后进行模拟答题和关闭窗口,同时检测视频任务进度是否满(注意不是视频的进度条,而是表示任务的圈),标准是是否新增加一个样式类,存在则跳到下一个。

    有用的话点个赞!

    展开全文
  • setTimeout

    2018-12-20 14:41:40
    教科书里面的setTimeout 定义很简单 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 广泛应用场景 定时器,轮播图,动画效果,自动滚动等等 上面一些应该是setTimeout在大家心中的样子,因为我们...

    教科书里面的setTimeout

    定义很简单 
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    广泛应用场景 
    定时器,轮播图,动画效果,自动滚动等等

    上面一些应该是setTimeout在大家心中的样子,因为我们平常使用也不是很多。

    但是setTimeout真的有那么简单吗?

    测试题

    一个题目,如果你在一段代码中发现下面内容

        var startTime = new Date();
        setTimeout(function () {
            console.log(new Date() - startTime);
        }, 100)

    请问最后打印的是多少? 
    我觉得正确答案是,取决于后面同步执行的js需要占用多少时间。 
    MAX(同步执行的时间, 100)

    再加一个题目,只有下面代码

        setTimeout(function () {
            func1();
        }, 0)
        func2();

    func1和func2谁会先执行?

    这个答案应该比较简单,func2先执行,func1后面执行。

    再来一题

        setTimeout(function () {
            func1()
        }, 0)

        setTimeout(function () {
            func1()
        })

    有什么差别?0秒后执行又是什么意思呢?是不是可以立即执行呢?

    答案是不会的,setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,意思就是不用再等多少秒了,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。

    setTimeout(function, 0)是有用的。它可以让callback作为另外一个事件响应代码来执行。实现了当前事件的代码执行完成之后,再渲染DOM,再执行setTimeout的callback。这样能够让一部分代码延后执行,并且在这之前渲染DOM。

    0秒延迟,此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的,但中间穿插着有关DOM渲染,事件回应等异步代码,他们将组成一个队列,零秒延迟将会实现插队操作。
    不写第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。

    上面答案来自《javascript框架设计》

     

    关于setTimeout要补充的是,即便主线程为空,0毫秒实际上也是达不到的。根据HTML的标准,最低是4毫秒。有兴趣的话可以自行了解。

    延伸:setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同。 
    setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒。

     

    好了,看了上面几个题目是不是感觉setTimeout不是想象中那样了。

    setTimeout和单线程

    下面是我自己的一些理解 
    首先需要注意javascript是单线程的,特点就是容易出现阻塞。如果一段程序处理时间很长,很容易导致整个页面hold住。什么交互都处理不了怎么办?

    简化复杂度?复杂逻辑后端处理?html5的多线程?

    上面都是ok的做法,但是setTimeout也是处理这种问题的一把好手。

    setTimeout一个很关键的用法就是分片,如果一段程序过大,我们可以拆分成若干细小的块。 
    例如上面的情况,我们将那一段复杂的逻辑拆分处理,分片塞入队列。这样即使在复杂程序没有处理完时,我们操作页面,也是能得到即使响应的。其实就是将交互插入到了复杂程序中执行。

    换一种思路,上面就是利用setTimeout实现一种伪多线程的概念。

    有个函数库Concurrent.Thread.js 就是实现js的多线程的。

    一个简单使用的例子,引入Concurrent.Thread.js

        Concurrent.Thread.create(function(){
            for (var i = 0;i<1000000;i++) {
                console.log(i);
            };
        });
        $('#test').click(function  () {
            alert(1);
        });

    虽然有个巨大的循环,但是这时不妨碍你去触发alert();

    是不是很厉害~

    还有一种场景,当我们需要渲染一个很复杂的DOM时,例如table组件,复杂的构图等等,假如整个过程需要3s,我们是等待完全处理完成在呈现,还是使用一个setTimeout分片,将内容一片一片的断续呈现。

    其实setTimeout给了我们很多优化交互的空间。

    如何使用

    setTimeout这么厉害,那么我们是需要在在项目中大量使用吗? 
    我这边的观点是非常不建议,在我们业务中,基本上是禁止在业务逻辑中使用setTimeout的,因为我所看到的很多使用方式都是一些问题不好解决,setTimeout作为一个hack的方式。 
    例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个setTimeout,确保实例先初始化。 
    为什么错误?这里其实就是使用hack的手段 
    第一是埋下了坑,打乱模块的生命周期 
    第二是出现问题时,setTimeout其实是很难调试的。

    我认为正确的使用方式是,看看生命周期(可参考《关于软件的生命周期 》),把实例化提到使用前执行。

    综上,setTimeout其实想用好还是很困难的, 他更多的出现是在框架和类库中,例如一些实现Promis的框架,就用上了setTimeout去实现异步。 
    所以假如你想去阅读一些源码,想去造一些轮子,setTimeout还是必不可少的工具。

     

     

    实际项目运用:

    函数去抖

    让一个函数在一定间隔内没有被调用时,才开始执行被调用方法。比如当你在使用 google 搜索内容的时候,有些关键词输入到一半,谷歌会展示一个可选列表,根据你当前输入的内容作出的一个猜测联想。需要监听文字改变,每一次改变都会调用一次回调函数,现在需要的一种实现是在用户停止键盘事件一段时间后,去发送一个请求。

    var debounce = function(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            method.call(context);
        },100);
    }

    轮询任务

    js中可以使用setInterval开启轮询,但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。

    比如有个轮询任务间隔是100ms,但是执行方法的时间需要450ms,那么在200ms、300ms、400ms本来是计划中执行任务的时间,浏览器发现第一个还未执行完,那么就会放弃2、3、4次的任务执行,并且在500ms之后再次执行任务,这样的话,其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。

    setTimeout(function () {
        console.log('我被调用了');
        setTimeout(arguments.callee, 100);
    }, 100);

    延迟js引擎的调用

    var div = document.createElement('div');
    div.innerHTML = '我是一个div';
    div.setAttribute('style', 'width:200px; height:200px;background-color:#f00; ');
    document.body.appendChild(div);
    
    setTimeout(function() {
        console.log('我被调用了');
    }, 1000);

     

    carousel.js

     

     

     

     

    展开全文
  • JS中setTimeout()的用法详解

    万次阅读 多人点赞 2017-01-16 23:55:50
    setTimeout( ) 是属于 window 的 方法, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method 请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 ...
  • 使用场景:获取验证码 1,data中定义参数 data: { color: "#ff6f10", disabled: false, getCode: "获取验证码", }, 2,wxml中的引用 ... class='form-code-btn' bindt..
  • setTimeout调用匿名函数

    千次阅读 2017-10-14 15:45:24
    javascript中的setTimeout,大家都知道是这样调用:setTimeout(函数,毫秒)我以前不了解匿名函数,极死板,总要预先定义一个函数,然后再赋给setTimeout里的这个“函数”参数:function f(){ } setTimeout(f,1000);...
  •  《JavaScript高级程序设计》这本书里面,介绍了很多关于setTimeout函数的神奇使用,今天来介绍下第一个——使用setTimeout代替setInterval进行间歇调用。  书中是这么说的 “在开发环境下,很少使用间歇调用...
  • setTimeout/setInterval 传参的问题

    千次阅读 2013-04-27 15:07:29
    我们知道,setTimeout/setInterval 是 JavaScript 语言下的两门利器。有时候控件没反应了,代码外层包装一下 setTimeout 就可以了。JavaScript 是单线程的环境,setTimeout 的作用是把包装的代码塞入队列,而不是...
  • setTimeout解决GUI渲染线程阻塞问题

    千次阅读 2017-08-27 19:04:22
    setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次这个函数的时候,我...
  • setTimeout定时器以及部分小知识点

    千次阅读 2018-07-26 09:51:18
    setTimeout定时器 难点: 按固定格式输出(hh:mm:ss) 开始,暂停,开始 解决多次点击开始会使定时器速度加快的问题 1. 按固定格式输出 function formatNumber(num) { return num &amp;lt; 10 ? '0' ...
  • 使用闭包对setTimeout进行简单封装

    千次阅读 2013-07-10 14:39:29
    在写js脚本时,经常会用到一些拼写函数的情况,例如调用setTimeout var msgalert="test"; function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click...
  • js定时器使用: ...setTimeout: setTimeout(function,timeout); 例如: var timerId = setTimeout(method,1000); fuction method(){ //do something } 效果: 延时1秒后执行,只执行一次。 ...
  • setTimeOut传参数的时候的写法

    千次阅读 2008-05-03 14:01:00
    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数。先看一个简单的代码:function show(){ alert("Hello World");}setTimeout(show,1000);这段代码的效果是在1秒后显示...
  • setTimeout只在指定时间后执行一次,代码如下: //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",...
  • setTimeout方法

    千次阅读 2019-05-07 22:01:00
    SetTimeout方法 第一种写法↓ setTimeout方法是指在指定时间后执行一次指定函数。强调!只执行一次! ObjSetTimeout后面的window可以省略不写。SetTimeout后面的括号传入函数名称,注意只是传入名称不能有括号,...
  • javascript里的这两个定时器函数,大家一定耳熟能详:setTimeout("函数()",毫秒)就是开启一个计时器,指定毫秒后执行该函数一次。 有关定时器,javascript还有另一个类似的函数,setInterval("函数()",毫秒)。不同...
  • setTimeout详解

    千次阅读 2018-03-31 19:08:51
    计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或...当然,这一篇文章并不仅仅告诉你怎么用setTimeout,而且理解其是如何执行的。1、setTimeout原理先来看一段代码:var start = new Date(...
  • 探索setTimeout

    千次阅读 2016-12-27 17:22:28
    其实说起JavaScript中的定时器(Timer)中的 setTimeout() 方法,从事开发的同学想必都不会陌生,觉得这些东西很简单很基础。但是有时候恰恰是基础简单的东西,才越容易被忽略。先看一段代码:console.log("start");...
  • 定时器

    千次阅读 2019-04-08 17:23:02
    1.1setTimeout() 作用:到达间隔时间之后,只调用一次回调函数 **语法: ** window.setTimeout(回调函数, 间隔时间) window可以省略 间隔时间以毫秒为单位 返回这个定时器的标识符,是数字类型 javascript // ...

空空如也

1 2 3 4 5 ... 20
收藏数 24,407
精华内容 9,762
关键字:

settimeout