js进阶--防抖、节流、同步异步简单概述09

防抖节流

防抖

频繁点击下，只执行一次 一般用于点击事件

非立即执行的防抖

只执行最后一个

//非立即执行的防抖
//func是个函数,wait是时间
function debounce(func, wait) {
    let timer;
    return function () {
        let that = this;
        clearTimeout(timer);
        timer = null;
        timer = setTimeout(function () {
            res = func.apply(that)
        }, wait)
    }
}
box.onclick = debounce(fn, 1000);

立即执行的防抖

只执行第一个

function debounce(func,wait){
    let timer;
    return function(){
        clearTimeout(timer);
        let now=!timer;//第一次为true 如果重复点击，timer是数字，因为没有让他等于null，那么就是false
        timer=setTimeout(function(){
            timer=null;
        },wait)
        if(now){
            func.call(this);
        }
    }
}
box.onclick = debounce(fn, 1000);

既可以立即执行，也可以非立即执行，由第三个值决定

immediate不传的话默认为false,传true就是立即执行

function debounce(func,wait,immediate){
    let timer;
    return function(){
        if(immediate){
            clearTimeout(timer);
            let now=!timer;
            timer=setTimeout(function(){
                timer=null;
            },wait)
            if(now){
                func.call(this);
            }
        }else{
            clearTimeout(timer);
            let that=this;
            timer=setTimeout(function(){
                func.call(that);
            },wait)
        }
    }
}

节流

频繁触发时，每隔一段时间执行一次 一般用于onscroll滑动和ommouseover鼠标悬浮

时间戳版，立即执行

function throttle(fn, time) {
    let previous = 0;
    return function () {
        let now = Date.now(); // 获取现在的时间，毫秒级的
        if (now - previous >= time) { //第一次是新时间-0大于设定时间，立即执行，以后都是新时间-老时间，大于设定时间就执行，否则不执行
            fn.call(this);
            previous = now; //把上一次的获取时间赋值给previous
        }
    }
}
        box.onmouseover = throttle(fn, 1000);

定时器版的节流,非立即执行

function throttle(fn, time) {
    let timer;
    return function () {
        if (!timer) {
            // 如果不赋值为null，这个条件不成立；
            timer = setTimeout(() => {
                timer = null;//在执行的时候，让timer为null
                fn.call(this);
            }, time);
        }
    }
}
box.onmouseover = throttle(fn, 1000);

同异步编程

js是一个单线程的 当打开一个页面的时候，浏览器会分配一个线程来执行页面的代码，而且把全部的同步代码执行完成以后才会执行异步代码

js队列分两种，主任务队列，异步任务队列

主任务队列自上而下执行同步的代码，异步任务队列对异步任务进行计时， 当执行到异步代码时，将异步的给异步任务队列，开始计时，且按倒计时完成顺序来排队 然后当所有同步任务执行完成以后，把异步队列内的异步任务从上而下给主任务队列执行

异步的都有谁

定时器 ajax open的第三个传参可以控制同异步 事件:onclick onload等

console.log(100);
setTimeout(function(){console.log(300)},500)
for(var i=0;i<1000000000;i++){};//for循环太耗时间了，阻断了线程
setTimeout(function(){console.log(400)},200)
console.log(900);
//100 900 300 400