Executing code in intervals with…

Executing code in intervals with JS: setTimeout() and setInterval()

There are two ways you can execute the code in intervals with JS, but which one to use?

rtIXD7RoYl

OD9HaMdfuk

How do recursive setTimeout() and setInterval() differ?

The difference between the two versions of the above code is a subtle one.

  • Recursive setTimeout() guarantees the same delay between the executions. (For example, 100ms in the above case.) The code will run, then wait 100 milliseconds before it runs again—so the interval will be the same, regardless of how long the code takes to run.
  • The example using setInterval() does things somewhat differently. The interval you chose includes the time taken to execute the code you want to run in. Let’s say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.
  • When using setTimeout() recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.
    When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive setTimeout() — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won’t get errors.

Resource: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals

#javascript #setinterval #settimeout

BrowserSync, Gulp and TypeScript

I was creating a simple web app with VueJS (without cli, no single file component) and I thought it would be good to have a local server which watches changes, auto-transpiles TypeScript and later maybe builds(minify, terser, copy files etc.) for the production. By using BrowserSync & Gulp, a typescript project can be easily watched, and the browser can be auto-reloaded in case of any changes. Let’s assume we have .ts files and index.html in “src” folder. The following gulpfile compiles the TS files into “dist” folder, watches for the changes and reloads the browser in case of changes. It still requires the build function for the production but it would be similar to development function, maybe terser plugin can be added.

const { series, watch, src, dest } = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var server = require('browser-sync').create();

const paths = {
    scripts: {
        ts: 'src/*.ts',
        dest: 'dist/js/'
    }
};

function reload(done) {
    server.reload();
    done();
}

function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}


let development = function() {
    src('./index.html').pipe(dest('./dist/'));
    src('./css/**/*').pipe(dest('./dist/css'));
    src('./src/*.json').pipe(dest('./dist'));
    src('./assets/**/*').pipe(dest('./dist/assets/'));
    return tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write())
        .pipe(dest('./dist/js/'));
};

const mywatcher = () => {
    console.log(paths.scripts.ts)
    const watcher = watch(paths.scripts.ts, series(development, reload))
    watcher.on('change', (path) => {
        console.log(`File ${path} was changed.`);
    });
};
const dev = series(development, serve, mywatcher );
exports.default = dev;

Another simple example. It uses terser and browsersync, dist folder is alway ready to deploy. It is for single js file but can be modified:

const { series, watch, src, dest } = require('gulp');
const terser = require('gulp-terser');
var server = require('browser-sync').create();

function copyAssets() {
    return src('src/assets/*')
        .pipe(dest('dist/assets'));
}

function copy() {
    return src('./src/app.js')
        .pipe(terser({
            mangle: { toplevel: true },
            compress: true
        }))
        .pipe(src('src/index.html'))
        .pipe(src('src/style.css'))
        .pipe(src('_redirects'))
        .pipe(dest('dist/'));
}

function reload(done) {
    server.reload();
    done();
}

function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}


const watcher = () => {
    const watcher = watch('src', series(copyAssets, copy, reload))
    watcher.on('change', (path) => {
        console.log(`File ${path} was changed.`);
    });
};
exports.default = series(copyAssets, copy, serve, watcher);

There is a gulp plugin for the same purpose: https://www.npmjs.com/package/gulp-webserver

Use browsersync to start a server from a folder and watch all the files for changes:

 browser-sync start --server './' --files './'

Links:
1. https://www.browsersync.io/docs/gulp
2. https://gulpjs.com/docs/en/api/watch
3. https://css-tricks.com/gulp-for-beginners/
#typescript #gulp #vuejs #javascript

Reverse an array

You know there is array.reverse() function, sharing the snippet below just in case wondering how to do it. We iterate half of the lentgh, guess why?

let array = [1, 2, 3, 'Siesta', 5, 6, 7, 7, 'Spain'];
for (let i = 0; i < array.length / 2; i++) {
    let val= array[i];
    array[i] = array[array.length - i - 1];
    array[array.length - i - 1] = val;
}
console.log(array);

#array #typescript #javascript