Как грамотно объединить два JS?

bsi 21.03.2020 js Все вопросы » Ламерские вопросы 812

вопрос

Всем привет. На странице имеется чекбокс class="envelope__check", после нажатия (ставим галочку) должно происходить следующее: - через 1 секунду печатается некий текст, это выполняет вот этот скрипт

function f() {
function writeTextByJS(id, text, speed){
    var ele = document.getElementById(id),
      txt = text.join("").split("");
  var interval = setInterval(function(){
      if(!txt[0]){
            return clearInterval(interval);
     };
      ele.innerHTML += txt.shift();
   }, speed != undefined ? speed : 100);
   return false;
};
writeTextByJS(
  "test",
   [
'Печатается\n',
  'некий\n',
  'текст\ n'
    ]
);
}
document.querySelector('.envelope__check').onchange=function()
{if(this.checked){setTimeout(f, 1000)}}

- далее с определённым интервалом на экран выводятся картинки, это выполняет вот этот скрипт

Promise.delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });
document.querySelector(".envelope__check").onchange = ch1_change;
async function ch1_change() {
    this.onchange = ch1_disabled;
    await Promise.delay(1000);
    document.querySelector("#picture1 img").src = "1.png";
    await Promise.delay(2000);
    document.querySelector("#picture2 img").src = "3.gif";
} 
function ch1_disabled() { this.checked = true; }

Необходимо объединить оба скрипта в один. Как это грамотно сделать? Всем спасибо.

Ответил: bsi

Нужный ответ получен. Тему можно закрыть.

11 комментариев

Юзер

cortin - 2019-05-2923 марта 2020 09:16 - #75261

function writeTextByJS(id, text, speed){
    var ele = document.getElementById(id),
      txt = text.join("").split("");
    var interval = setInterval(function(){
      if(!txt[0]){
            return clearInterval(interval);
     };
      ele.innerHTML += txt.shift();
   }, speed != undefined ? speed : 100);
   return false;
};

Promise.delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });

document.querySelector(".envelope__check").onchange = function () {
    if( this.checked ){
        setTimeout( {
            writeTextByJS(
              "test",
               [
            'Печатается\n',
              'некий\n',
              'текст\ n'
                ]
            );
        }, 1000);
    };
    
    this.onchange = function () {
        this.checked = true;
    };
    await Promise.delay(1000);
    document.querySelector("#picture1 img").src = "1.png";
    await Promise.delay(2000);
    document.querySelector("#picture2 img").src = "3.gif";
};

Юзер

bsi - 2019-05-2923 марта 2020 18:06 - #75262

cortin, огромное спасибо за участие. Я делаю только первые шаги и у меня не получилось, чтобы тут всё заработало. Если нетрудно укажите где ошибка. Вот мой код всей страницы,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
 
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div id="picture1"><img src=""></div>
    <div id="picture2"><img src=""></div>
    <input type="checkbox" class="envelope__check">
    <script>
function writeTextByJS(id, text, speed){
    var ele = document.getElementById(id),
      txt = text.join("").split("");
    var interval = setInterval(function(){
      if(!txt[0]){
            return clearInterval(interval);
     };
      ele.innerHTML += txt.shift();
   }, speed != undefined ? speed : 100);
   return false;
};

Promise.delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });

document.querySelector(".envelope__check").onchange = function () {
    if( this.checked ){
        setTimeout( {
            writeTextByJS(
              "test",
               [
            'Печатается\n',
              'некий\n',
              'текст\ n'
                ]
            );
        }, 1000);
    };
    
    this.onchange = function () {
        this.checked = true;
    };
    await Promise.delay(1000);
    document.querySelector("#picture1 img").src = "1.png";
    await Promise.delay(2000);
    document.querySelector("#picture2 img").src = "3.gif";
};
</script>
</body>
</html>

пробую её работу в автономном режиме (на компьютере). Еще раз спасибо.

Юзер

bsi - 2019-05-2923 марта 2020 19:48 - #75263

Одну ошибку нашел нет дива <pre id="test"></pre> , добавил но всё равно не работает.

Юзер

cortin - 2019-05-2924 марта 2020 11:30 - #75266

Ты всегда можеш в браузере посмотреть где что не так. Открываеш свою станицу и нажимаеш F12, открывается панель разработчика, там есть таб консоль. В нем будут все ошибки. О панели писать не буду там просто, но для начала видно очень всего много, не все тебе потребуется в основном консоль чтобы видет ошибки и сеть чтобы видеть запросы, остальное уже нюансы

Юзер

cortin - 2019-05-2924 марта 2020 11:32 - #75267

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
width: 150px;
height: 150px;
border: 1px solid black;
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="picture1"><img src=""></div>
<div id="picture2"><img src=""></div>
<input type="checkbox" class="envelope__check">
<script>
function writeTextByJS(id, text, speed){
var ele = document.getElementById(id),
txt = text.join("").split("");
var interval = setInterval(function(){
if(!txt[0]){
return clearInterval(interval);
};
ele.innerHTML += txt.shift();
}, speed != undefined ? speed : 100);
return false;
};

Promise.delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });

document.querySelector(".envelope__check").onchange = function () {
if( this.checked ){
setTimeout( function () {
writeTextByJS( [ "Печатается\n", "некий\n", "текст\n" ] );
}, 1000);
};

this.onchange = function () {
this.checked = true;
};
await Promise.delay(1000);
document.querySelector("#picture1 img").src = "1.png";
await Promise.delay(2000);
document.querySelector("#picture2 img").src = "3.gif";
};
</script>
</body>
</html>

Юзер

bsi - 2019-05-2924 марта 2020 12:22 - #75275

Сделал новую страницу с вашим кодом, правда добавил туда div <pre id="test"></pre> для вывода печатающегося текста, открыл страницу и результат ноль. F12 нажал, в консоле выдало ошибку HTML1300: Произошел переход.
1.html (1,1) SCRIPT1004: SCRIPT1004: Expected ';' 1.html (51,7). Что-то не работает.

Юзер

cortin - 2019-05-2924 марта 2020 13:19 - #75277

skinj vse sourci mne ja posmotrju skinu tebe otvet

Юзер

cortin - 2019-05-2924 марта 2020 13:20 - #75278

kartinki, promise skript