函数方法实现


等待函数

 function wait(ms: number) {
      // 这里是得以等待的主体
      return new Promise<void>(function (reslove) {
          setTimeout(() => {
              reslove();
          }, ms);
      });
    }

    (async function test() {
        await wait(1000);
        console.warn('等待了 1s');
    })();

数据请求未超时,正常返回,超时抛出错误

  // 模拟请求的数据
function wait() {
    return new Promise(function (reslove) {
      setTimeout(() => {
        reslove("数据");
      }, 8000);
    });
 }

// Promise状态一旦确定 就无法再改变
// 比如 先reject 再 reslove ,promise的结果仍以第一次 reject 为准!
function getData() {
  return new Promise(function (reslove, reject) {
    setTimeout(() => {
      reject(new Error("timeout"));
    }, 6000);// 6秒后会抛出错误 reject 

    // 6 秒内正常返回 reslove
    wait().then((res) => {
      if (res) {
        console.log("正常接收");
        reslove(res);
      }
    });
  });
}

console.log("getData", getData());

数据请求发生错误后间隔调用

正确实现

/**
 * 
 * @param {() => boolean} queryfn 会返回 true 或 false
 * @param {() => Promise<any>} callback 请求数据的方法
 * time: 重新调用的时间间隔、以1.5倍递增,若去除则每次调用时间一样
 * queryfn 只能返回boolean, 返回结果不能是Promise
 */

function simplePoller(queryfn, callback) {
  let time = 1000;

  const poll = () => {
    console.log("time", time);
    if (queryfn()) {
      callback();
      return;
    }
    setTimeout(poll, time);
    time *= 1.5
  };
  setTimeout(poll, time);
}

console.log("deepQuery", simplePoller(isOK, getData));

非正确实现

  function queryFn(num) {
    return new Promise(function (reslove, reject) {
      setTimeout(function () {
        reslove(false);
      }, num);
    });
  }
  function callback() {
    console.log("执行回调");
  }

 // 利用闭包
  function simplePoller(queryFn, callback) {
    let num = 0; // 变量;
    let aa = 1;

    function content() {
      num = num + 1;
      if (num > 1) {
        aa = aa * 1.5;
      }
      const step = num === 1 ? aa * 1000 : aa * 1000;
      console.log("dealty", step);
      queryFn(step).then((res) => {
        console.log("结果", res);
        if (!res) {
          content(queryFn, callback);
        }
        if (res) {
          callback();
        }
      });
    }
    content();
  }

  simplePoller(queryFn, callback);

闭包问题

const test = () => {
        let num = 0;

        function effect () {
            num += 1
            const message = `现在的值${num}`
            return function unmount() {
                console.log('message', message);
            }
        };

        return effect;
    };

    const add = test();
    const unmount = add();

    console.log('add2', add()()); // 2
    console.log('add3', add()()); // 3
    console.log('add4', add()()); // 4

    console.log('unmount add 5', unmount()); // 1 按直觉这里应该是3 但它是1! 这就是js闭包陷阱

debounce

  function debounce(fn, delaty) {
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        fn();
      }, delaty);
    };
  }

throrrle

  function throrrle(fn, delaty) {
    let valid = true;
    return function () {
      if (!valid) {
        return;
      }
      valid = false;
      setTimeout(function () {
        fn();
        valid = true;
      }, delaty);
    };
  }

选择排序

  let arr = [1, 3, 8, 9, 7, 6];

 // 原理: 找出最小的,放在最前面
  function xunaze(arr) {
    for (var i = 0; i < arr.length; i++) {
      let minIndex = i;
      for (var j = i + 1; j < arr.length; j++) {
        if (arr[j] < arr[minIndex]) {
          minIndex = j;
        }
      }

      if (i !== minIndex) {
        let temp = arr[minIndex];
        arr[minIndex] = arr[i];
        arr[i] = temp;
      }
    }

    return arr;
  }

文章作者: KarlFranz
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 reprint policy. If reproduced, please indicate source KarlFranz !
评论
  目录