• 定时器


    原文地址:https://wangdoc.com/javascript/
    JavaScript提供定时执行功能,叫做定时器,主要由setTimeout()setInterval()这两个函数完成。它们向任务队列添加定时任务。

    setTimeout()

    setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器编号,以后可以用来取消定时器。

    var timerId = setTimeout(func | code, delay);
    

    上面代码中,setTimeout接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数是delay是推迟执行的毫秒数。

    console.log(1);
    setTimeout("console.log(2)", 1000);
    console.log(3);
    // 1
    // 3
    // 2
    

    如果推迟执行的是函数,就直接将函数名,作为setTimeout参数。

    function f() {
        console.log(2);
    }
    
    setTimeout(f, 1000);
    

    setTimeout第二个参数如果省略,则默认为0。
    除了前两个参数,setTimeout还允许更多的参数。它们将依次传入推迟的函数(回调函数)。

    setTimeout(function (a, b) {
        console.log(a + b);
    }, 1000, 1, 1);
    

    还有一个需要注意的地方,如果回调函数是对象的方法,那么setTimeout使得方法内部的this关键字指向全局环境,而不是定义时所在的那么对象。

    var x = 1; 
    var obj = {
        x: 2,
        y: function () {
            console.log(this.x);
        }
    };
    
    setTimeout(obj.y, 1000); // 1
    

    为了防止出现这个问题,一种解决方法是将obj.y放入一个函数。

    var x = 1;
    var obj = {
        x: 2,
        y: function () {
            console.log(this.x);
        }
    };
    setTimeout(function () {
        obj.y();
    }, 1000);
    

    另一种解决方法是使用bind方法,将obj.y这个方法绑定在obj上。

    var x = 1;
    var obj = {
        x: 2,
        y: function () {
            console.log(this.x);
        }
    };
    
    setTimeout(obj.y.bind(obj), 1000);
    

    setInterval()

    setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

    var i = 1;
    var timer = setInterval(function () {
        console.log(2);
    }, 1000);
    

    setInterval的一个常见的用途是实现轮询。下面是一个轮询的URL的Hash值是否发生变化的例子。

    var hash = window.location.hash;
    var hashWatcher = setInterval(function () {
        if (window.location.hash != hash) {
            updatePage();
        }
    }, 1000);
    

    setInterval指定的是开始执行之间的时间间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的时间间隔会小于指定的时间。比如,setInterval指定每100ms执行一次,每执行一次需要5ms,那么第一次执行结束后95ms,第二次执行就会开始。如果执行事件超出时间间隔,那么一次执行结束立即开始下次执行。
    为了确保两次执行之间有固定的间隔,可以不使用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。

    clearTimeout(),clearInterval()

    setTimeoutsetInterval函数,都返回一个整数值,表示计数器编号。将该整数传入clearTimeoutclearInterval函数,就可以取消对应的定时器。
    setTimeoutsetInterval返回的整数值是连续的,也就是说,第二个setTimeout返回的整数值,将比第一个的整数值大1。利用这一点,可以写一个函数,取消当前所有的setTimeout定时器。

    (function () {
        var gid = setInterval(clearAllTimeouts, 0);
        
        function clearAllTimeouts() {
            var id = setTimeout(function () {}, 0);
            while (id > 0) {
                if (id != gid) {
                    clearTimeout(id);
                }
                id--;
            }
        }
    })();
    

    实例debounce函数

    有时,我们不希望回调函数被频繁调用。比如,用户填入网页输入框的内容,希望通过Ajax方法传回服务器,jQuery的写法如下。

    $(".textarea").on("keydown", ajaxAction);
    

    这样写有一个很大的缺点,就是用户连续点击,就会连续触发keydown事件,造成大量的Ajax通信。这是不必要的,而且很有可能产生性能问题。正确的做法应该是,设置一个门槛值,表示两次Ajax通信的最小间隔时间。如果在间隔时间内,发生新的keydown事件,再将数据发送出去。
    这种做法叫做debounce(防抖动)。假定两次Ajax通信的间隔不得小于2500ms,上面代码写成下面这样。

    $("textarea").on("keydown", debounce(ajaxAction, 2500));
    
    function debounce(fn, delay) {
        var timer = null;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }
    

    上面代码中,只要在2500毫秒内,用户再次击键,就会取消上一次的定时器,然后再建一个定时器。这样就保证了回调函数之间的调用间隔,至少2500毫秒。

    运行机制

    setTimeoutsetInterval的运行机制,是将指定的代码移出本轮事件循环,等到下一轮循环再检查是否到了指定时间。如果到了,就执行指定的代码;如果不到,就继续等待。
    这意味着,setTimeoutsetInterval指定的回调函数,必须等到本轮事件循环的所有同步任务都执行完,才会开始执行。由于前一个任务什么时间执行完,是不确定的,所以没有办法保证,setTimeoutsetInterval指定的任务,一定会按照预订时间执行。

    setTimeout(someTask, 100);
    veryLongTask();
    

    上面代码的setTimeout,指定100ms以后运行某个任务。但是,如果后面的veryLongTask运行时间非常长,只有等待veryLongTask运行结束,才轮到它执行。

    setTimeout(f, 0)

    含义

    setTimeout的作用是将代码推迟到指定时间执行,如果指定时间为0,即setTimeout(f, 0)会立即执行吗?
    答案是不会。因为上一节说过,必须要等到当前脚本的同步任务全部处理完以后,才会执行setTimeout指定的回调函数f。也就是说,setTimeout(f, 0)会在下一轮事件循环开始就执行。
    总之,setTimeout(f, 0)这种写法的目的是,尽可能早地执行f,但是并不能保证立刻就执行f
    实际上,setTimeout(f, 0)不会真的在0毫秒之后运行,不同的浏览器有不同的实现。以Edge浏览器为例,会等到4毫秒之后运行,如果电脑正在使用电池供电,会等到16毫秒之后运行;如果网页不在当前Tab,会推迟到1000ms后运行。这样为了节省系统资源。

    应用

    setTimeout(f, 0)有几个非常重要的用途。它的一大应用是,可以调整事件发生的顺序。比如,网页开发中,某个事件先发生在子元素,然后冒泡到父元素,即子元素的事件回调函数,会早于父元素的事件回调函数触发。如果想让父元素的事件回调函数先发生,就要用到setTimeout(f, 0)

    var input = document.getElementById("myButton");
    input.onclick = function A() {
        setTimeout(function B() {
            input.value += " input";
        }, 0);
    };
    document.body,onclick = function C() {
        input.value += " body";
    };
    

    另一个应用是,用户自定义的回调函数,通常在浏览器的默认动作之前触发。比如用户在输入框输入文本,keypress事件会在浏览器接收文本之前出发。因此,下面的回调函数达不到目的。

    document.getElementById("input-box").onkeypress = function (event) {
        this.value = this.value.toUpperCase();
    };
    

    因为浏览器先响应了用户的时间,即onkeypress事件,再进行默认动作(显示用户输入)。
    上面代码想在用户每次输入文本以后,立即将字符转为大写。但实际上,它只能将本次输入前的字符转为大写,因为浏览器此时还没接收到新的文本,所以this.value取不到最新输入的那个字符。只有用setTimeout改写,上面的代码才能发挥作用。

    document.getElementById("input-box").onkeypress = function () {
        var self = this;
        setTimeout(function () {
            self.value = self.value.toUpperCase();
        }, 0);
    };
    

    由于setTimeout(f, 0)实际上意味着,将任务放到浏览器最早可得的空闲时段执行,所以那些计算量大,耗时长的任务,常常被放到几个小部分,分别放到setTimeout(f, 0)里面执行。

    var div = document.getElementByTagName("div")[0];
    // 写法一
    for (var i = 0xA00000; i < 0xFFFFFF; i++) {
        div.style.backgroundColor = "#" + i.toString(16);
    }
    // 写法二
    var timer;
    var i = 0x100000;
    function func() {
        timer = setTimeout(func, 0);
        div.style.backgroundColor = "#" + i.toString(16);
        if (i++ === 0xFFFFFF) {
            clearTimeout(timer);
        }
    }
    
    timer = setTimeout(func, 0);
    

    上面两种写法,都是改变一个网页元素的背景色。写法一会造成浏览器阻塞,因为JavaScript执行速度远高于DOM,会造成打了DOM操作堆积,而写法二就不会。
    另一个使用这种技巧的例子是代码高亮的处理。如果代码块很大,一次性处理,可能对性能造成很大的压力,那么将其分成一个个小块,一次处理一块,比如写成setTimeout(highlightNext, 50)的样子,性能压力就会减轻。

  • 相关阅读:
    weekly review 200836: the MidAutumn Festival
    weekly review 200841: Good Weekend
    解决ListView的onitemclick事件无法响应
    Android退出程序时的"再按一次退出"实现
    Android开发之文件下载
    android ExpandableListView详解
    Android ListView及其属性
    android 图片放大的处理
    android ExpandableListView
    Toast.makeText用法
  • 原文地址:https://www.cnblogs.com/chris-jichen/p/10171068.html
Copyright © 2020-2023  润新知