О setTimeout

внешний интерфейс JavaScript модульный тест Ajax
Интервьюер: «Ты знаешь таймер?»
Я знаю"
Интервьюер: «Тогда что вы имеете в виду под таймером?»
Я: "Таймер можно реализовать с помощью setTimeout"
Интервьюер: "setTimeout(function () { console.log("1") },0);
console.log("2"); Тогда каков порядок вывода на консоль? "
Я: неуверенно...

так....есть эта статья, после столь долгого нытья начинается основной текст!

Синтаксическая функция setTimeout:

Метод setTimeout() используется для вызова функции или вычисления выражения по прошествии указанного количества миллисекунд.

Чтобы объяснить приведенное выше предложение, вот простой пример:

<!DOCTYPE html>
<head>
    <title>setTimeout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
    <h1>setTimeout</h1>
    <span id="content">测试</span>
    <script>
       setTimeout(function () {
           let content = document.getElementById('content');
           content.innerHTML = "<div>一秒后</div>";
       },1000);
    </script>
</body>
</html>

Содержимое тега span меняется с «тест» на «через одну секунду» через одну секунду.

Функция таймера:

достигать:

<!DOCTYPE html>
<head>
    <title>setTimeout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
    <h1>setTimeout</h1>
    <span id="content">时间</span>
    <button onclick="start()">开始</button>
    <script>
        var x = 00,
            y = 00,
            z = 00;
        function start () {
            if (x<= 59 && x>=0 && y<=59 && y>=0 && z<=59 && z>=0) {
               let content = document.getElementById('content');
               content.innerHTML = z + ":" + y + ":" + x;
               console.log(x);
               x = x + 1;
            } else if (y<=59 && y>=0 && z<=59 && z>=0) {
                y = y + 1;
                x = 0;
            } else if (z<=59 && z>=0){
                z = z + 1;
                x = 0;
                y = 0;
            }
            setTimeout ("start()",1000);  //注意，这里调用要用引号包围
        }
    </script>
</body>
</html>

Вывод консоли:

После нажатия здесь выполняется функция Start (), и функция Setimeate () в запусках вызовов функций снова () снова, поэтому функция Start () называется раз в секунду.

Параметры setTimeout():

Всем известно, что setInterval() и setTimeout() могут принимать два параметра: первый параметр — это функция, которую нужно вызвать, которую нужно передать, второй параметр — временной интервал, количество миллисекунд, которое может быть опущено. Но на самом деле он может получить больше параметров, так для чего эти параметры? Начиная с третьего параметра, он по очереди используется для представления параметров, передаваемых в функцию обратного вызова.

пример:

setTimeout(function(a,b){
   console.log(0+a+b);//这里打印的是：7
},1000,3,4);
Примечание. IE 9.0 и более ранние версии позволяют setTimeout иметь только два параметра, больше параметров не поддерживается.

Если вы хотите передать параметры функции обратного вызова, вы можете использовать bind().
eg:

setTimeout( function(a,b){}.bind(3,4), 1000 );
Итак, как мне удалить таймер (грустное лицо)? Не волнуйся, не волнуйся, я тебе скажу!

clearTimeout():

Функция Settimeout, которая возвращает целочисленное значение счетчика, указывает номер, входящая целочисленная функция ClearTimeout, вы можете отменить соответствующий таймер.

clearTimout() имеет следующий синтаксис:  clearTimeout(timeoutID)
Чтобы использовать clearTimeout(), когда мы устанавливаем setTimeout(), нам нужно дать этой setTimout() имя, которое будет timeoutID, и когда мы вызываем его для остановки, мы используем этот timeoutID для завершения, что является пользовательским именем.

Применение:

var id1 = setTimeout(f,1000);  //id1就是timeoutID
var id2 = setInterval(f,1000); //id2就是timeoutID

clearTimeout(id1);
clearInterval(id2);

это из setTimeout() указывает на:

По поводу проблемы с этим наведением в javascript, давно меня беспокоит.Ой, почему так сложно? Это означает, кто является объектом вызова, на который указывает this.

Итак, давайте поговорим о каштанах так:

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

Почему? Разве не сказано, что вызываемый объект указывает на какой объект, разве функция setTimeout не вызывает здесь метод y в объекте obj, разве это все еще не вызывается setTimeout? Да, верно, это называется by setTimeout. , но функция setTimeout принадлежит окну, знаете ли, поэтому объектом setTimeout является окно, так что все понятно.

Поймите, тогда приходите испытать вас, готовых принять рекрута!
function Animal(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);  //undefined
  }
}
var dog = new Animal('John');
setTimeout(dog.sayHi, 1000);

Хахаха, ты правильно понял, вау👋, но без награды 😂

Когда выполняется dog.sayHi, он выполняется в глобальном объекте, но this.login не может получить значение.

Время задержки setTimeout() равно 0

Чтобы ответить на вопрос, который задал мне интервьюер. Вау, уроки крови, иди, иди, иди Перейдем непосредственно к каштанам:

    console.log('a');
    setTimeout(function(){
    console.log('b');
    },0);
    console.log('c');
    console.log('d');

Вывод консоли:
a
c
d
b
Я даже скриншоты не делаю. Знаете почему?По идее у него время задержки равно 0,не должно ли оно выполняться сразу,нет. Поскольку операционный механизм setTimeout сказал, что задача, указанная setTimeout, не будет выполняться до тех пор, пока не будут обработаны задача синхронизации текущего скрипта и существующие события в «очереди задач». Другими словами, реальный эффект setTimeout заключается в добавлении события после существующего события «очереди задач», что обуславливает выполнение определенного фрагмента кода в указанное время. Событие, добавленное setTimeout, будет выполнено в следующем цикле событий. Ну и рекомендуется посмотреть на неясный цикл событийRuan Yifeng - Подробное объяснение механизма запуска JavaScript

Что еще тут можно сказать о setTimeout — это механизм выполнения setTimeout.

setTimeout() в цикле событий:

Как мы все знаем, движок Javascript (далее движок JS) является однопоточным, и может выполнять только одну задачу в определенное время, и блокирует выполнение других задач, то есть эти задачи являются последовательными . В этом случае пользователям приходится ждать завершения трудоемкой операции, прежде чем приступать к последующим операциям, что, очевидно, недопустимо, но в реальной разработке мы можем использовать асинхронный код для ее решения.

Когда выполняются асинхронные методы, такие как setTimeout() или ajax-запросы и события DOM, они будут управляться другими модулями ядра браузера. Когда асинхронный метод удовлетворяет условию срабатывания, модуль поместит метод в очередь задач.Когда код основного потока после выполнения находится в состоянии ожидания, он проверит очередь задач и поместит первую задачу в очереди в стек. Выполнить, продолжить проверку очереди задач после завершения и так далее. Предварительным условием является то, что основной поток бездействует, что является моделью цикла обработки событий.

Серьезно поговорили о волне теорий, давай по каштану:

setTimeout(function () {
    console.log("b");
},0)
console.log("a");

Вывод консоли:
a
b
Принцип объяснен в предыдущих двух абзацах.При выполнении setTimeout() помещается в очередь задач.После того, как основной поток выполнит задачу основного потока, он переходит в очередь задач, чтобы выполнить setTimeout и выполнить его.

Та же причина:

setTimeout(function(){
  console.log(1111);
},0)
while (true) {};

Здесь консоль никогда ничего не выведет, потому что основной поток создал бесконечный цикл, основной поток никогда не будет бездействовать, и он не пойдет в очередь задач для выполнения функции setTimeout.
Порекомендуйте статью для лучшего понимания:Полное понимание setTimeout()

Суммировать:

Сказав так много, setTimeout очень мощный, ахаха. Но если вы не можете его освоить, не рекомендуется использовать его больше. Ведь в некоторых ситуациях setTimeout существует как хак.

Вот, во-первых, поздравляю, должен быть полный урожай. Во-вторых, можно поставить лайк 😜

Категории